mdboard 1.1.0 → 1.3.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}
@@ -60,6 +71,8 @@ a{color:var(--accent);text-decoration:none}
 .content{flex:1;overflow-y:auto;padding:20px 24px}
 .view{display:none}
 .view.active{display:block}
+#view-notes.active{display:flex;flex-direction:column;margin:-20px -24px;height:calc(100% + 40px)}
+#view-notes #notes-container{flex:1;overflow:hidden}
 
 /* ── Icons ───────────────────────────────────────────────── */
 .icon{width:16px;height:16px;flex-shrink:0;vertical-align:middle;display:inline-block}
@@ -163,26 +176,60 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
 .health-label{flex:1;font-size:13px;color:var(--text2)}
 .health-val{font-family:var(--mono);font-size:13px;font-weight:600}
 
-/* ── Detail Panel ────────────────────────────────────────── */
+/* ── Detail Panel — Notion-style ─────────────────────────── */
 .panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;opacity:0;pointer-events:none;transition:opacity .2s}
 .panel-overlay.open{opacity:1;pointer-events:auto}
-.detail-panel{position:fixed;top:0;right:0;width:520px;max-width:92vw;height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:100;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;overflow:hidden}
+.detail-panel{position:fixed;top:0;right:0;width:600px;max-width:92vw;height:100vh;background:var(--bg);border-left:1px solid var(--border);z-index:100;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;overflow:hidden}
 .detail-panel.open{transform:translateX(0)}
-.panel-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0}
+.panel-header{padding:12px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0;background:var(--surface)}
 .panel-type{font-size:10px;padding:3px 8px;border-radius:var(--radius-sm);background:var(--accent-dim);color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
 .panel-item-id{font-family:var(--mono);font-size:13px;color:var(--text2)}
 .panel-close{margin-left:auto;background:none;border:none;color:var(--text2);cursor:pointer;font-size:18px;padding:4px 8px;border-radius:var(--radius-sm);line-height:1}
 .panel-close:hover{background:var(--surface2);color:var(--text)}
-.panel-body{flex:1;overflow-y:auto;padding:20px}
-.panel-field{margin-bottom:16px}
-.panel-field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);font-weight:600;margin-bottom:6px}
-.panel-field input,.panel-field select,.panel-field textarea{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:var(--radius-sm);font-family:var(--font);font-size:13px}
-.panel-field input:focus,.panel-field select:focus,.panel-field textarea:focus{outline:none;border-color:var(--accent)}
-.panel-field textarea{min-height:120px;resize:vertical;font-family:var(--mono);font-size:12px;line-height:1.6}
-.panel-field .field-with-icon{display:flex;align-items:center;gap:8px}
-.panel-field .field-with-icon select{flex:1}
-.panel-props{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
-.panel-footer{padding:16px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0}
+
+/* Panel title — large Notion-style */
+.panel-title-wrap{padding:20px 24px 8px;flex-shrink:0}
+.panel-title-input{width:100%;font-size:28px;font-weight:700;background:transparent;border:none;color:var(--text);font-family:var(--font);outline:none;padding:0;line-height:1.3}
+.panel-title-input::placeholder{color:var(--text3)}
+.panel-title-input:disabled{opacity:.7}
+
+/* Panel properties — compact Notion-style rows */
+.panel-properties{padding:4px 24px 8px;flex-shrink:0;border-bottom:1px solid var(--border)}
+.prop-row{display:flex;align-items:center;padding:4px 0;min-height:32px}
+.prop-label{width:100px;flex-shrink:0;font-size:12px;color:var(--text3);font-weight:500}
+.prop-value{flex:1;display:flex;align-items:center;gap:6px}
+.prop-value select,.prop-value input[type="text"],.prop-value input[type="number"],.prop-value input[type="date"]{background:transparent;border:1px solid transparent;color:var(--text);padding:4px 8px;border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;width:100%}
+.prop-value select:hover,.prop-value input:hover{border-color:var(--border)}
+.prop-value select:focus,.prop-value input:focus{outline:none;border-color:var(--accent);background:var(--surface)}
+.prop-value select:disabled,.prop-value input:disabled{opacity:.6;cursor:default}
+.prop-value select:disabled:hover,.prop-value input:disabled:hover{border-color:transparent}
+.prop-text{font-size:13px;color:var(--text2);padding:4px 8px}
+
+/* AI Tag Input */
+.prop-row-divider{margin-top:4px;border-top:1px solid var(--border);padding-top:8px}
+.prop-row-toggle{cursor:pointer;user-select:none}
+.prop-row-toggle:hover{background:var(--surface2);border-radius:var(--radius-sm)}
+.ai-toggle-arrow{display:inline-block;font-size:10px;width:14px;transition:transform .15s}
+.ai-tag-input{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:2px 4px;min-height:28px;border:1px solid transparent;border-radius:var(--radius-sm);cursor:text;position:relative;transition:border-color .15s}
+.ai-tag-input:hover{border-color:var(--border)}
+.ai-tag-input:focus-within{border-color:var(--accent);background:var(--surface)}
+.ai-tag{display:inline-flex;align-items:center;gap:2px;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:500;white-space:nowrap;background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
+.ai-tag-own{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}
+.ai-tag-inherited{border-style:dashed;opacity:.6}
+.ai-tag-remove{background:none;border:none;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0 0 0 2px;opacity:.6}
+.ai-tag-remove:hover{opacity:1}
+.ai-tag-text{border:none!important;background:transparent!important;padding:2px 4px!important;font-size:12px;min-width:60px;flex:1;outline:none;color:var(--text)}
+.ai-tag-text::placeholder{color:var(--text3);font-size:11px}
+.ai-autocomplete{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:50;max-height:160px;overflow-y:auto;margin-top:2px;display:none}
+.ai-autocomplete.open{display:block}
+.ai-autocomplete-item{padding:6px 10px;font-size:12px;color:var(--text2);cursor:pointer;transition:background .1s}
+.ai-autocomplete-item:hover,.ai-autocomplete-item.active{background:var(--accent-dim);color:var(--text)}
+
+/* Panel content area — fills remaining space */
+.panel-content-area{flex:1;overflow-y:auto;padding:0}
+.panel-editor-zone{padding:16px 24px;min-height:200px}
+
+.panel-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center;flex-shrink:0}
 .btn{padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--text);transition:all .15s;font-family:var(--font)}
 .btn:hover{background:var(--border)}
 .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
@@ -207,31 +254,244 @@ 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}
+
+/* ── Notes View — Notion-style ───────────────────────────── */
+.notes-layout{display:flex;height:100%;gap:0}
+.notes-sidebar{width:260px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--surface)}
+.notes-toolbar{padding:10px 12px;display:flex;gap:8px;border-bottom:1px solid var(--border)}
+.notes-toolbar input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:var(--radius-sm);font-size:12px;font-family:var(--font)}
+.notes-toolbar input:focus{outline:none;border-color:var(--accent)}
+.notes-list{flex:1;overflow-y:auto}
+.notes-list-item{padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
+.notes-list-item:hover{background:var(--surface2)}
+.notes-list-item.active{background:var(--accent-dim);border-left:3px solid var(--accent)}
+.notes-list-title{font-size:13px;font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.notes-list-date{font-size:11px;color:var(--text3);font-family:var(--mono)}
+.notes-list-empty{padding:40px 20px;text-align:center;color:var(--text3);font-size:13px}
+.notes-editor{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
+.notes-header-bar{padding:32px 48px 0;flex-shrink:0}
+.notes-title-input{width:100%;font-size:32px;font-weight:700;background:transparent;border:none;color:var(--text);font-family:var(--font);outline:none;padding:0;margin-bottom:4px;line-height:1.3}
+.notes-title-input::placeholder{color:var(--text3)}
+.notes-meta{font-size:11px;color:var(--text3);font-family:var(--mono)}
+.notes-editorjs-wrap{flex:1;overflow-y:auto;padding:16px 40px 40px}
+.notes-editor-footer{padding:10px 24px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0;background:var(--surface)}
+.notes-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:14px}
+.notes-empty-state kbd{display:inline-block;padding:2px 6px;background:var(--surface2);border:1px solid var(--border);border-radius:3px;font-family:var(--mono);font-size:12px}
+.notes-editor-loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3)}
+
+/* ── Editor.js — Dark theme overrides ────────────────────── */
+.codex-editor{color:var(--text);font-family:var(--font)}
+.codex-editor .ce-block__content{max-width:100%;margin:0}
+.codex-editor .ce-toolbar__content{max-width:100%}
+.codex-editor .ce-toolbar__plus{color:var(--text3);background:transparent;border:1px solid var(--border);width:26px;height:26px}
+.codex-editor .ce-toolbar__plus:hover{background:var(--surface2);color:var(--text)}
+.codex-editor .ce-toolbar__plus svg{color:inherit}
+.codex-editor .ce-toolbar__settings-btn{color:var(--text3);background:transparent;width:26px;height:26px}
+.codex-editor .ce-toolbar__settings-btn:hover{background:var(--surface2);color:var(--text)}
+.codex-editor .ce-toolbar__actions{background:transparent}
+/* Inline toolbar */
+.codex-editor .ce-inline-toolbar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.4)}
+.codex-editor .ce-inline-toolbar__buttons{color:var(--text)}
+.codex-editor .ce-inline-tool{color:var(--text2)}
+.codex-editor .ce-inline-tool:hover{color:var(--text);background:var(--surface2)}
+.codex-editor .ce-inline-tool--active{color:var(--accent)}
+.codex-editor .ce-inline-tool-input{background:var(--bg);color:var(--text);border:none;border-top:1px solid var(--border)}
+/* Conversion toolbar */
+.codex-editor .ce-conversion-toolbar{background:var(--surface);border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.4)}
+.codex-editor .ce-conversion-tool{color:var(--text2)}
+.codex-editor .ce-conversion-tool:hover{background:var(--surface2);color:var(--text)}
+.codex-editor .ce-conversion-tool--active{color:var(--accent)}
+.codex-editor .ce-conversion-tool__icon{background:var(--surface2);color:var(--text2)}
+/* Settings panel */
+.codex-editor .ce-settings{background:var(--surface);border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.4)}
+.codex-editor .cdx-settings-button{color:var(--text2)}
+.codex-editor .cdx-settings-button:hover{background:var(--surface2);color:var(--text)}
+.codex-editor .cdx-settings-button--active{color:var(--accent)}
+/* Popover (slash commands menu) */
+.ce-popover{background:var(--surface)!important;border:1px solid var(--border)!important;box-shadow:0 8px 24px rgba(0,0,0,.4)!important;color:var(--text)}
+.ce-popover__container{background:var(--surface)!important;border:1px solid var(--border)!important;box-shadow:0 8px 24px rgba(0,0,0,.4)!important}
+.ce-popover-item{color:var(--text2)!important}
+.ce-popover-item:hover{background:var(--surface2)!important;color:var(--text)!important}
+.ce-popover-item--focused{background:var(--surface2)!important;color:var(--text)!important}
+.ce-popover-item__icon{background:var(--surface2)!important;color:var(--text2)!important;border:none!important}
+.ce-popover-item:hover .ce-popover-item__icon{color:var(--text)!important}
+.ce-popover-item__title{color:var(--text)!important}
+.ce-popover-item__secondary-title{color:var(--text3)!important}
+.ce-popover__search{background:transparent!important;border-bottom:1px solid var(--border)!important}
+.ce-popover__search input,.cdx-search-field__input{color:var(--text)!important;background:var(--bg)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important}
+.cdx-search-field{background:transparent!important}
+.ce-popover__nothing-found-message{color:var(--text3)!important}
+.ce-popover__items::-webkit-scrollbar{width:4px}
+.ce-popover__items::-webkit-scrollbar-track{background:transparent}
+.ce-popover__items::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
+.ce-block{padding:3px 0}
+.ce-paragraph{line-height:1.65;font-size:15px}
+.ce-paragraph[data-placeholder]:empty::before{color:var(--text3)!important}
+.ce-header{font-weight:700}
+h1.ce-header{font-size:28px;line-height:1.2;margin:8px 0 2px}
+h2.ce-header{font-size:22px;line-height:1.25;margin:6px 0 2px}
+h3.ce-header{font-size:18px;line-height:1.3;margin:4px 0 2px}
+h4.ce-header{font-size:15px;line-height:1.4}
+.ce-code__textarea{background:var(--surface)!important;color:var(--text)!important;border:none!important;border-radius:var(--radius-sm)!important;font-family:var(--mono)!important;font-size:13px!important;padding:16px!important;line-height:1.5!important}
+.cdx-list{font-size:15px;line-height:1.65}
+.cdx-list__item{color:var(--text)}
+/* Checklist in list v2 */
+.cdx-checklist{font-size:15px}
+.cdx-checklist__item-checkbox{background:var(--surface2);border:2px solid var(--border2);border-radius:3px}
+.cdx-checklist__item--checked .cdx-checklist__item-checkbox{background:var(--accent);border-color:var(--accent)}
+.cdx-checklist__item--checked .cdx-checklist__item-text{color:var(--text2);text-decoration:line-through}
+/* List v2 checklist style */
+.cdx-list--checklist .cdx-list__item-checkbox{background:var(--surface2);border-color:var(--border2)}
+.cdx-list--checklist .cdx-list__item--checked .cdx-list__item-checkbox{background:var(--accent);border-color:var(--accent)}
+.cdx-list--checklist .cdx-list__item--checked .cdx-list__item-content{color:var(--text2);text-decoration:line-through}
+.cdx-quote{border-left:3px solid var(--accent);padding-left:16px;font-style:italic;color:var(--text2);font-size:15px;line-height:1.65}
+.cdx-quote [contenteditable]{outline:none}
+.cdx-quote__caption{display:none!important}
+.ce-delimiter{line-height:1;padding:12px 0;color:var(--text3);letter-spacing:8px}
+.cdx-marker{background:rgba(91,110,245,.2);padding:2px 0}
+
+/* Fallback textarea (when CDN not available) */
+.editor-fallback-textarea{width:100%;min-height:200px;resize:vertical;background:transparent;border:none;color:var(--text);padding:0;font-family:var(--font);font-size:15px;line-height:1.65;outline:none}
+
+/* ── Markdown Rendered (readonly) ────────────────────────── */
+.md-rendered{font-size:15px;line-height:1.65;color:var(--text)}
+.md-rendered h1,.md-rendered h2,.md-rendered h3{font-weight:700;margin:16px 0 6px}
+.md-rendered h1{font-size:28px;line-height:1.2}
+.md-rendered h2{font-size:22px;line-height:1.25}
+.md-rendered h3{font-size:18px;line-height:1.3}
+.md-rendered p{margin-bottom:8px}
+.md-rendered ul,.md-rendered ol{padding-left:24px;margin-bottom:8px}
+.md-rendered li{margin-bottom:4px}
+.md-rendered code{background:var(--surface2);padding:2px 6px;border-radius:var(--radius-sm);font-family:var(--mono);font-size:13px}
+.md-rendered pre{background:var(--surface);padding:16px;border-radius:var(--radius-sm);overflow-x:auto;margin-bottom:12px}
+.md-rendered pre code{background:transparent;padding:0}
+.md-rendered blockquote{border-left:3px solid var(--accent);padding-left:16px;color:var(--text2);margin:8px 0;font-style:italic}
+.md-rendered hr{border:none;border-top:1px solid var(--border);margin:20px 0}
+.md-rendered a{color:var(--accent)}
+.md-rendered .md-check{display:flex;align-items:center;gap:8px;padding:2px 0}
+.md-rendered .md-check-box{width:16px;height:16px;border:2px solid var(--border2);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;color:var(--accent)}
+.md-rendered .md-check-box.checked{background:var(--accent);border-color:var(--accent);color:#fff}
+
+/* ── Settings Panel ──────────────────────────────────────── */
+.sidebar-settings{padding:8px}
+.sidebar-settings a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);color:var(--text3);font-size:13px;font-weight:500;transition:all .15s;cursor:pointer}
+.sidebar-settings a:hover{color:var(--text);background:var(--surface2)}
+.sidebar-settings svg{width:16px;height:16px;flex-shrink:0}
+.settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;opacity:0;pointer-events:none;transition:opacity .2s}
+.settings-overlay.open{opacity:1;pointer-events:auto}
+.settings-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);width:680px;max-width:92vw;max-height:85vh;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);z-index:200;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:all .2s ease;box-shadow:0 16px 48px rgba(0,0,0,.4)}
+.settings-panel.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
+.settings-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
+.settings-header h2{font-size:16px;font-weight:700}
+.settings-content{flex:1;overflow-y:auto;padding:20px}
+.settings-section h3{font-size:13px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
+.settings-theme-info{font-size:12px;color:var(--text3);margin-bottom:12px}
+.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
+.theme-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:10px;cursor:pointer;transition:all .15s}
+.theme-card:hover{border-color:var(--border2)}
+.theme-card.active{border-color:var(--accent)}
+.theme-card-preview{display:flex;gap:3px;height:32px;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:8px}
+.theme-card-preview span{flex:1}
+.theme-card-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.theme-card-type{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.03em}
+.settings-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:12px}
+.toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--text2);user-select:none}
+.toggle-label input{display:none}
+.toggle-switch{position:relative;width:36px;height:20px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;transition:all .2s;flex-shrink:0}
+.toggle-switch::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--text3);border-radius:50%;transition:all .2s}
+.toggle-label input:checked+.toggle-switch{background:var(--accent);border-color:var(--accent)}
+.toggle-label input:checked+.toggle-switch::after{left:18px;background:#fff}
+
+/* ── Rail Switch Icon ────────────────────────────────────── */
+.rail-switch{background:transparent;color:var(--text3);border:1px dashed var(--border2)}
+.rail-switch:hover{color:var(--text);border-color:var(--accent);background:var(--accent-dim);border-style:solid}
+
+/* ── History Modal ──────────────────────────────────────── */
+.history-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;opacity:0;pointer-events:none;transition:opacity .2s}
+.history-overlay.open{opacity:1;pointer-events:auto}
+.history-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);width:560px;max-width:92vw;max-height:70vh;background:var(--bg);border:1px solid var(--border);border-radius:12px;z-index:200;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:all .2s ease;box-shadow:0 16px 48px rgba(0,0,0,.5)}
+.history-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
+.history-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
+.history-header h2{font-size:16px;font-weight:700}
+.history-body{flex:1;overflow-y:auto;padding:8px 0}
+.history-loading,.history-empty{padding:40px 20px;text-align:center;color:var(--text3);font-size:13px}
+.history-item{display:flex;align-items:center;gap:12px;padding:10px 20px;cursor:pointer;transition:background .15s}
+.history-item:hover{background:var(--surface2)}
+.history-item-current{background:var(--accent-dim)}
+.history-item-current:hover{background:var(--accent-dim)}
+.history-item-icon{width:36px;height:36px;border-radius:var(--radius);background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--accent);flex-shrink:0}
+.history-item-current .history-item-icon{background:var(--accent);color:#fff}
+.history-item-info{flex:1;min-width:0}
+.history-item-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
+.history-item-path{font-size:11px;color:var(--text3);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.history-item-time{font-size:11px;color:var(--text3);font-family:var(--mono);flex-shrink:0;white-space:nowrap}
+.history-current-badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:10px;font-weight:600;background:var(--accent);color:#fff}
+
 /* ── 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}
   .detail-panel{width:100%;max-width:100%}
+  #view-notes.active{margin:-16px}
+  .notes-sidebar{width:200px}
+  .notes-header-bar{padding:24px 24px 0}
+  .notes-editorjs-wrap{padding:12px 16px 24px}
 }
 @media(max-width:768px){
   #h-stats{flex-wrap:wrap;gap:12px}
   .header{gap:12px}
   .metrics-grid{grid-template-columns:1fr}
-  .panel-props{grid-template-columns:1fr}
+  .notes-sidebar{display:none}
+  .notes-header-bar{padding:20px 16px 0}
+  .notes-editorjs-wrap{padding:8px 8px 24px}
 }
 </style>
 <style id="dynamic-styles"></style>
+<style id="theme-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>
@@ -249,17 +509,23 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>
         <span>Metrics</span>
       </a>
+      <a href="#notes" data-view="notes">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+        <span>Notes</span>
+      </a>
     </nav>
+    <div class="sidebar-settings" id="sidebar-settings">
+      <a href="#" id="settings-toggle">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+        <span>Settings</span>
+      </a>
+    </div>
     <div class="sidebar-footer">mdboard</div>
   </aside>
 
   <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 +557,12 @@ 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 id="view-notes" class="view">
+        <div id="notes-container"></div>
+      </div>
     </div>
   </div>
 </div>
@@ -299,7 +571,306 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
 <div id="panel-overlay" class="panel-overlay"></div>
 <div id="detail-panel" class="detail-panel"></div>
 
+<!-- Settings Panel -->
+<div id="settings-overlay" class="settings-overlay"></div>
+<div id="settings-panel" class="settings-panel">
+  <div class="settings-header">
+    <h2>Settings</h2>
+    <button class="panel-close" id="settings-close">&times;</button>
+  </div>
+  <div class="settings-content">
+    <div class="settings-section">
+      <h3>Theme</h3>
+      <p id="settings-theme-info" class="settings-theme-info"></p>
+      <div id="theme-grid" class="theme-grid"></div>
+    </div>
+  </div>
+  <div class="settings-footer">
+    <label class="toggle-label">
+      <input type="checkbox" id="theme-default-toggle">
+      <span class="toggle-switch"></span>
+      <span>Set as default for all projects</span>
+    </label>
+    <button class="btn btn-primary" id="settings-save">Save</button>
+  </div>
+</div>
+
+<!-- History Modal -->
+<div id="history-overlay" class="history-overlay"></div>
+<div id="history-modal" class="history-modal"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2/dist/editorjs.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest/dist/header.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest/dist/editorjs-list.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest/dist/code.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest/dist/quote.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest/dist/delimiter.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest/dist/marker.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest/dist/inline-code.umd.js"></script>
 <script>
+/* ══════════════════════════════════════════════════════════════
+   THEMES — Predefined color themes for mdboard
+   ══════════════════════════════════════════════════════════════ */
+var THEMES = {
+  'default-dark': {
+    name: 'Default Dark', type: 'dark',
+    vars: {
+      bg:'#0A0A0B',surface:'#141415',surface2:'#1A1A1C',border:'#232326',border2:'#2E2E33',
+      text:'#E8E8ED',text2:'#8B8B93',text3:'#5A5A63',
+      accent:'#5B6EF5','accent-dim':'rgba(91,110,245,.15)',
+      success:'#2EA043','success-dim':'rgba(46,160,67,.15)',
+      warning:'#D4A72C','warning-dim':'rgba(212,167,44,.15)',
+      danger:'#DA3633','danger-dim':'rgba(218,54,51,.15)',
+      purple:'#8B5CF6','purple-dim':'rgba(139,92,246,.15)'
+    }
+  },
+  'linear-dark': {
+    name: 'Linear Dark', type: 'dark',
+    vars: {
+      bg:'#101012',surface:'#1A1A1F',surface2:'#222228',border:'#2C2C35',border2:'#38384A',
+      text:'#E2E2E9',text2:'#8E8E9E',text3:'#5C5C6E',
+      accent:'#5E6AD2','accent-dim':'rgba(94,106,210,.15)',
+      success:'#4DA771','success-dim':'rgba(77,167,113,.15)',
+      warning:'#F2C94C','warning-dim':'rgba(242,201,76,.15)',
+      danger:'#EB5757','danger-dim':'rgba(235,87,87,.15)',
+      purple:'#BB87FC','purple-dim':'rgba(187,135,252,.15)'
+    }
+  },
+  'linear-light': {
+    name: 'Linear Light', type: 'light',
+    vars: {
+      bg:'#F9F9FB',surface:'#FFFFFF',surface2:'#F0F0F4',border:'#E0E0E6',border2:'#D0D0D8',
+      text:'#1A1A2E',text2:'#6B6B80',text3:'#9090A0',
+      accent:'#5E6AD2','accent-dim':'rgba(94,106,210,.1)',
+      success:'#4DA771','success-dim':'rgba(77,167,113,.1)',
+      warning:'#D4A017','warning-dim':'rgba(212,160,23,.1)',
+      danger:'#EB5757','danger-dim':'rgba(235,87,87,.1)',
+      purple:'#9B6DD7','purple-dim':'rgba(155,109,215,.1)'
+    }
+  },
+  'jira-dark': {
+    name: 'Jira Dark', type: 'dark',
+    vars: {
+      bg:'#0D1117',surface:'#161B22',surface2:'#1C2333',border:'#293040',border2:'#344050',
+      text:'#DEE4EC',text2:'#8C96A5',text3:'#5A6577',
+      accent:'#2684FF','accent-dim':'rgba(38,132,255,.15)',
+      success:'#36B37E','success-dim':'rgba(54,179,126,.15)',
+      warning:'#FFAB00','warning-dim':'rgba(255,171,0,.15)',
+      danger:'#FF5630','danger-dim':'rgba(255,86,48,.15)',
+      purple:'#6554C0','purple-dim':'rgba(101,84,192,.15)'
+    }
+  },
+  'jira-light': {
+    name: 'Jira Light', type: 'light',
+    vars: {
+      bg:'#F4F5F7',surface:'#FFFFFF',surface2:'#EBECF0',border:'#DFE1E6',border2:'#C1C7D0',
+      text:'#172B4D',text2:'#6B778C',text3:'#97A0AF',
+      accent:'#0052CC','accent-dim':'rgba(0,82,204,.1)',
+      success:'#36B37E','success-dim':'rgba(54,179,126,.1)',
+      warning:'#FF991F','warning-dim':'rgba(255,153,31,.1)',
+      danger:'#FF5630','danger-dim':'rgba(255,86,48,.1)',
+      purple:'#6554C0','purple-dim':'rgba(101,84,192,.1)'
+    }
+  },
+  'catppuccin-mocha': {
+    name: 'Catppuccin Mocha', type: 'dark',
+    vars: {
+      bg:'#1E1E2E',surface:'#262637',surface2:'#313244',border:'#3B3B52',border2:'#45475A',
+      text:'#CDD6F4',text2:'#A6ADC8',text3:'#6C7086',
+      accent:'#89B4FA','accent-dim':'rgba(137,180,250,.15)',
+      success:'#A6E3A1','success-dim':'rgba(166,227,161,.15)',
+      warning:'#F9E2AF','warning-dim':'rgba(249,226,175,.15)',
+      danger:'#F38BA8','danger-dim':'rgba(243,139,168,.15)',
+      purple:'#CBA6F7','purple-dim':'rgba(203,166,247,.15)'
+    }
+  },
+  'catppuccin-latte': {
+    name: 'Catppuccin Latte', type: 'light',
+    vars: {
+      bg:'#EFF1F5',surface:'#FFFFFF',surface2:'#E6E9EF',border:'#CCD0DA',border2:'#BCC0CC',
+      text:'#4C4F69',text2:'#6C6F85',text3:'#9CA0B0',
+      accent:'#1E66F5','accent-dim':'rgba(30,102,245,.1)',
+      success:'#40A02B','success-dim':'rgba(64,160,43,.1)',
+      warning:'#DF8E1D','warning-dim':'rgba(223,142,29,.1)',
+      danger:'#D20F39','danger-dim':'rgba(210,15,57,.1)',
+      purple:'#8839EF','purple-dim':'rgba(136,57,239,.1)'
+    }
+  },
+  'ayu-dark': {
+    name: 'Ayu Dark', type: 'dark',
+    vars: {
+      bg:'#0B0E14',surface:'#0F1219',surface2:'#151920',border:'#1E222A',border2:'#272D38',
+      text:'#BFBDB6',text2:'#6C7380',text3:'#4A5060',
+      accent:'#E6B450','accent-dim':'rgba(230,180,80,.15)',
+      success:'#7FD962','success-dim':'rgba(127,217,98,.15)',
+      warning:'#FFB454','warning-dim':'rgba(255,180,84,.15)',
+      danger:'#F07178','danger-dim':'rgba(240,113,120,.15)',
+      purple:'#D2A6FF','purple-dim':'rgba(210,166,255,.15)'
+    }
+  },
+  'ayu-light': {
+    name: 'Ayu Light', type: 'light',
+    vars: {
+      bg:'#F8F9FA',surface:'#FFFFFF',surface2:'#F0F1F2',border:'#E0E1E2',border2:'#D4D5D6',
+      text:'#5C6166',text2:'#787B80',text3:'#ACB0B5',
+      accent:'#FF9940','accent-dim':'rgba(255,153,64,.1)',
+      success:'#6CBF43','success-dim':'rgba(108,191,67,.1)',
+      warning:'#F2AE49','warning-dim':'rgba(242,174,73,.1)',
+      danger:'#F07171','danger-dim':'rgba(240,113,113,.1)',
+      purple:'#A37ACC','purple-dim':'rgba(163,122,204,.1)'
+    }
+  },
+  'tokyo-night': {
+    name: 'Tokyo Night', type: 'dark',
+    vars: {
+      bg:'#1A1B26',surface:'#1F2335',surface2:'#24283B',border:'#2F3449',border2:'#3B4261',
+      text:'#C0CAF5',text2:'#7982A9',text3:'#565F89',
+      accent:'#7AA2F7','accent-dim':'rgba(122,162,247,.15)',
+      success:'#9ECE6A','success-dim':'rgba(158,206,106,.15)',
+      warning:'#E0AF68','warning-dim':'rgba(224,175,104,.15)',
+      danger:'#F7768E','danger-dim':'rgba(247,118,142,.15)',
+      purple:'#BB9AF7','purple-dim':'rgba(187,154,247,.15)'
+    }
+  },
+  'tokyo-night-storm': {
+    name: 'Tokyo Night Storm', type: 'dark',
+    vars: {
+      bg:'#24283B',surface:'#292E42',surface2:'#2F3549',border:'#3B4261',border2:'#464F78',
+      text:'#C0CAF5',text2:'#7982A9',text3:'#565F89',
+      accent:'#7AA2F7','accent-dim':'rgba(122,162,247,.15)',
+      success:'#9ECE6A','success-dim':'rgba(158,206,106,.15)',
+      warning:'#E0AF68','warning-dim':'rgba(224,175,104,.15)',
+      danger:'#F7768E','danger-dim':'rgba(247,118,142,.15)',
+      purple:'#BB9AF7','purple-dim':'rgba(187,154,247,.15)'
+    }
+  },
+  'notion-light': {
+    name: 'Notion Light', type: 'light',
+    vars: {
+      bg:'#F7F6F3',surface:'#FFFFFF',surface2:'#EEEEEC',border:'#E3E2DE',border2:'#D4D3CF',
+      text:'#37352F',text2:'#6B6B6B',text3:'#9B9A97',
+      accent:'#2383E2','accent-dim':'rgba(35,131,226,.1)',
+      success:'#0F7B0F','success-dim':'rgba(15,123,15,.1)',
+      warning:'#CB7B00','warning-dim':'rgba(203,123,0,.1)',
+      danger:'#E03E3E','danger-dim':'rgba(224,62,62,.1)',
+      purple:'#6940A5','purple-dim':'rgba(105,64,165,.1)'
+    }
+  },
+  'notion-dark': {
+    name: 'Notion Dark', type: 'dark',
+    vars: {
+      bg:'#191919',surface:'#202020',surface2:'#2B2B2B',border:'#363636',border2:'#444444',
+      text:'#E3E2DE',text2:'#9B9B9B',text3:'#6B6B6B',
+      accent:'#529CCA','accent-dim':'rgba(82,156,202,.15)',
+      success:'#4DAB9A','success-dim':'rgba(77,171,154,.15)',
+      warning:'#CB7B00','warning-dim':'rgba(203,123,0,.15)',
+      danger:'#E03E3E','danger-dim':'rgba(224,62,62,.15)',
+      purple:'#9A6DD7','purple-dim':'rgba(154,109,215,.15)'
+    }
+  },
+  'github-dark': {
+    name: 'GitHub Dark', type: 'dark',
+    vars: {
+      bg:'#0D1117',surface:'#161B22',surface2:'#1C2128',border:'#30363D',border2:'#3D444D',
+      text:'#E6EDF3',text2:'#8B949E',text3:'#6E7681',
+      accent:'#58A6FF','accent-dim':'rgba(88,166,255,.15)',
+      success:'#3FB950','success-dim':'rgba(63,185,80,.15)',
+      warning:'#D29922','warning-dim':'rgba(210,153,34,.15)',
+      danger:'#F85149','danger-dim':'rgba(248,81,73,.15)',
+      purple:'#BC8CFF','purple-dim':'rgba(188,140,255,.15)'
+    }
+  },
+  'github-light': {
+    name: 'GitHub Light', type: 'light',
+    vars: {
+      bg:'#F6F8FA',surface:'#FFFFFF',surface2:'#EAEEF2',border:'#D0D7DE',border2:'#BCC3CB',
+      text:'#1F2328',text2:'#656D76',text3:'#8C959F',
+      accent:'#0969DA','accent-dim':'rgba(9,105,218,.1)',
+      success:'#1A7F37','success-dim':'rgba(26,127,55,.1)',
+      warning:'#9A6700','warning-dim':'rgba(154,103,0,.1)',
+      danger:'#CF222E','danger-dim':'rgba(207,34,46,.1)',
+      purple:'#8250DF','purple-dim':'rgba(130,80,223,.1)'
+    }
+  },
+  'dracula': {
+    name: 'Dracula', type: 'dark',
+    vars: {
+      bg:'#1E1F29',surface:'#282A36',surface2:'#2E303E',border:'#3A3C4E',border2:'#44475A',
+      text:'#F8F8F2',text2:'#ADB0C0',text3:'#6272A4',
+      accent:'#BD93F9','accent-dim':'rgba(189,147,249,.15)',
+      success:'#50FA7B','success-dim':'rgba(80,250,123,.15)',
+      warning:'#F1FA8C','warning-dim':'rgba(241,250,140,.15)',
+      danger:'#FF5555','danger-dim':'rgba(255,85,85,.15)',
+      purple:'#FF79C6','purple-dim':'rgba(255,121,198,.15)'
+    }
+  },
+  'nord': {
+    name: 'Nord', type: 'dark',
+    vars: {
+      bg:'#242933',surface:'#2E3440',surface2:'#353C4A',border:'#3B4252',border2:'#434C5E',
+      text:'#ECEFF4',text2:'#A5B1C2',text3:'#697688',
+      accent:'#88C0D0','accent-dim':'rgba(136,192,208,.15)',
+      success:'#A3BE8C','success-dim':'rgba(163,190,140,.15)',
+      warning:'#EBCB8B','warning-dim':'rgba(235,203,139,.15)',
+      danger:'#BF616A','danger-dim':'rgba(191,97,106,.15)',
+      purple:'#B48EAD','purple-dim':'rgba(180,142,173,.15)'
+    }
+  },
+  'solarized-dark': {
+    name: 'Solarized Dark', type: 'dark',
+    vars: {
+      bg:'#002129',surface:'#002B36',surface2:'#073642',border:'#0A4050',border2:'#1A5060',
+      text:'#93A1A1',text2:'#839496',text3:'#586E75',
+      accent:'#268BD2','accent-dim':'rgba(38,139,210,.15)',
+      success:'#859900','success-dim':'rgba(133,153,0,.15)',
+      warning:'#B58900','warning-dim':'rgba(181,137,0,.15)',
+      danger:'#DC322F','danger-dim':'rgba(220,50,47,.15)',
+      purple:'#6C71C4','purple-dim':'rgba(108,113,196,.15)'
+    }
+  },
+  'solarized-light': {
+    name: 'Solarized Light', type: 'light',
+    vars: {
+      bg:'#FDF6E3',surface:'#FFFFFF',surface2:'#EEE8D5',border:'#DDD6C1',border2:'#C9C2AD',
+      text:'#586E75',text2:'#657B83',text3:'#93A1A1',
+      accent:'#268BD2','accent-dim':'rgba(38,139,210,.1)',
+      success:'#859900','success-dim':'rgba(133,153,0,.1)',
+      warning:'#B58900','warning-dim':'rgba(181,137,0,.1)',
+      danger:'#DC322F','danger-dim':'rgba(220,50,47,.1)',
+      purple:'#6C71C4','purple-dim':'rgba(108,113,196,.1)'
+    }
+  },
+  'one-dark': {
+    name: 'One Dark', type: 'dark',
+    vars: {
+      bg:'#1E2127',surface:'#282C34',surface2:'#2C313C',border:'#3A3F4B',border2:'#4B5263',
+      text:'#ABB2BF',text2:'#7F848E',text3:'#5C6370',
+      accent:'#61AFEF','accent-dim':'rgba(97,175,239,.15)',
+      success:'#98C379','success-dim':'rgba(152,195,121,.15)',
+      warning:'#E5C07B','warning-dim':'rgba(229,192,123,.15)',
+      danger:'#E06C75','danger-dim':'rgba(224,108,117,.15)',
+      purple:'#C678DD','purple-dim':'rgba(198,120,221,.15)'
+    }
+  },
+  'gruvbox-dark': {
+    name: 'Gruvbox Dark', type: 'dark',
+    vars: {
+      bg:'#1D2021',surface:'#282828',surface2:'#32302F',border:'#3C3836',border2:'#504945',
+      text:'#EBDBB2',text2:'#A89984',text3:'#7C6F64',
+      accent:'#FE8019','accent-dim':'rgba(254,128,25,.15)',
+      success:'#B8BB26','success-dim':'rgba(184,187,38,.15)',
+      warning:'#FABD2F','warning-dim':'rgba(250,189,47,.15)',
+      danger:'#FB4934','danger-dim':'rgba(251,73,52,.15)',
+      purple:'#D3869B','purple-dim':'rgba(211,134,155,.15)'
+    }
+  }
+};
+
+var THEME_LIST = Object.keys(THEMES).map(function(id) {
+  return { id: id, name: THEMES[id].name, type: THEMES[id].type };
+});
+
+
 /* ══════════════════════════════════════════════════════════════
    ICON SHAPES — SVG generators by icon name
    ══════════════════════════════════════════════════════════════ */
@@ -371,7 +942,9 @@ 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, notes: [],
+  aiSuggestions: null, theme: null
 };
 
 /* ── Helpers ─────────────────────────────────────────────── */
@@ -421,7 +994,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 +1014,83 @@ 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'), fetchJson(base + '/notes')
   ]);
   D.project = results[0]; D.milestones = results[1] || []; D.epics = results[2] || [];
   D.tasks = results[3] || [];
-  if (results[4]) D.sprints = [results[4]];
+  if (results[4]) D.sprints = [results[4]]; else D.sprints = [];
   D.metrics = results[5]; D.health = results[6];
   D.allSprints = results[7] || [];
   D.config = results[8];
+  D.sources = results[9] || [];
+  D.notes = results[10] || [];
   D.loaded = true;
 }
 
-function refreshData() { loadAll().then(function() { initFromConfig(); renderAll(); }); }
+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 +1166,169 @@ function generateDynamicStyles() {
   if (styleEl) styleEl.textContent = css;
 }
 
+/* ══════════════════════════════════════════════════════════════
+   THEME ENGINE
+   ══════════════════════════════════════════════════════════════ */
+function generateThemeCss(themeId) {
+  var theme = THEMES[themeId];
+  if (!theme) return '';
+  var css = '/* mdboard theme: ' + theme.name + ' */\n:root {\n';
+  for (var key in theme.vars) {
+    if (theme.vars.hasOwnProperty(key)) {
+      css += '  --' + key + ': ' + theme.vars[key] + ';\n';
+    }
+  }
+  css += '}\n';
+  return css;
+}
+
+function applyTheme(themeId) {
+  var theme = THEMES[themeId];
+  if (!theme) return;
+  var el = document.getElementById('theme-styles');
+  if (el) el.textContent = generateThemeCss(themeId);
+}
+
+function revertThemePreview() {
+  var el = document.getElementById('theme-styles');
+  if (el) el.textContent = '';
+}
+
+function reloadCustomCss() {
+  var link = document.getElementById('custom-theme');
+  if (link) link.href = '/mdboard.css?t=' + Date.now();
+}
+
+function getActiveTheme() {
+  return D.config && D.config.theme ? D.config.theme : 'default-dark';
+}
+
+/* ══════════════════════════════════════════════════════════════
+   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);
+  }
+
+  // Switch project icon (bottom of rail)
+  var switchDivider = document.createElement('div');
+  switchDivider.className = 'rail-divider';
+  switchDivider.style.marginTop = 'auto';
+  rail.appendChild(switchDivider);
+
+  var switchIcon = document.createElement('div');
+  switchIcon.className = 'rail-icon rail-switch';
+  switchIcon.setAttribute('data-tooltip', 'Switch workspace');
+  switchIcon.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 3h5v5"/><path d="M21 3l-7 7"/><path d="M8 21H3v-5"/><path d="M3 21l7-7"/></svg>';
+  switchIcon.onclick = function() { openHistoryModal(); };
+  rail.appendChild(switchIcon);
+}
+
+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 {
@@ -538,6 +1336,28 @@ function connectSSE() {
     src.onmessage = function(e) {
       var data;
       try { data = JSON.parse(e.data); } catch { data = {}; }
+
+      if (data.type === 'project-changed') {
+        // Full reload on project switch (from another tab or API call)
+        D.activeSource = null;
+        D.loaded = false;
+        loadAll().then(function() {
+          initFromConfig();
+          if (hasWorkspace()) {
+            buildSourceRail();
+            D.activeSource = null;
+            switchSource('overview');
+          } else {
+            // Hide source rail if no workspace
+            var rail = document.getElementById('source-rail');
+            if (rail) rail.innerHTML = '';
+            renderAll();
+          }
+          renderSidebarLogo();
+        });
+        return;
+      }
+
       if (data.cssReload) {
         var link = document.getElementById('custom-theme');
         if (link) link.href = '/mdboard.css?' + Date.now();
@@ -549,46 +1369,325 @@ function connectSSE() {
 }
 
 /* ══════════════════════════════════════════════════════════════
-   RENDER
+   EDITOR.JS WRAPPER — md↔blocks conversion + Notion-like UX
    ══════════════════════════════════════════════════════════════ */
-function renderAll() { renderHeader(); renderBoardFilters(); renderBoard(); renderTableControls(); renderTableBody(); renderMsFilters(); renderMilestones(); renderMetrics(); }
 
-function renderHeader() {
-  var p = D.project || {};
-  document.getElementById('h-project-name').textContent = p.name || 'Project';
-  document.getElementById('h-project-desc').textContent = p.description || '';
+/* ── Inline Markdown ↔ HTML ──────────────────────────────── */
+function inlineMdToHtml(text) {
+  if (!text) return '';
+  text = text.replace(/\*\*(.+?)\*\*/g, '<b>$1</b>');
+  text = text.replace(/\*(.+?)\*/g, '<i>$1</i>');
+  text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
+  text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+  return text;
+}
 
-  var mw = document.getElementById('h-milestone-wrap');
-  var am = D.milestones.find(function(m) { return m.status === 'active'; });
-  if (am) {
-    mw.style.display = '';
-    document.getElementById('h-milestone-name').textContent = am.title || am.id || '';
-    document.getElementById('h-milestone-progress').style.width = (am.progress || 0) + '%';
-  } else { mw.style.display = 'none'; }
+function inlineHtmlToMd(html) {
+  if (!html) return '';
+  var text = html.replace(/<br\s*\/?>/gi, '\n');
+  text = text.replace(/<a[^>]+href="([^"]*)"[^>]*>([^<]*)<\/a>/gi, '[$2]($1)');
+  text = text.replace(/<b>([^<]*)<\/b>/gi, '**$1**');
+  text = text.replace(/<strong>([^<]*)<\/strong>/gi, '**$1**');
+  text = text.replace(/<i>([^<]*)<\/i>/gi, '*$1*');
+  text = text.replace(/<em>([^<]*)<\/em>/gi, '*$1*');
+  text = text.replace(/<code>([^<]*)<\/code>/gi, '`$1`');
+  text = text.replace(/<mark[^>]*>([^<]*)<\/mark>/gi, '==$1==');
+  text = text.replace(/<[^>]+>/g, '');
+  return text;
+}
 
-  var sw = document.getElementById('h-sprint-wrap');
-  var as = D.sprints.find(function(s) { return s.status === 'active'; });
-  if (as) {
-    sw.style.display = '';
-    document.getElementById('h-sprint-name').textContent = as.goal || as.id || '';
-    var dr = daysRemaining(as.end_date);
-    document.getElementById('h-sprint-days').textContent = dr !== null ? (dr >= 0 ? dr + ' days left' : Math.abs(dr) + ' days over') : '';
-  } else { sw.style.display = 'none'; }
+/* ── Markdown → Editor.js Blocks ────────────────────────── */
+function markdownToBlocks(md) {
+  if (!md || !md.trim()) return [{ type: 'paragraph', data: { text: '' } }];
 
-  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">' + 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>';
+  var lines = md.split('\n');
+  var blocks = [];
+  var i = 0;
+
+  while (i < lines.length) {
+    var line = lines[i];
+
+    if (line.trim() === '') { i++; continue; }
+
+    if (/^---\s*$/.test(line.trim()) || /^\*\*\*\s*$/.test(line.trim())) {
+      blocks.push({ type: 'delimiter', data: {} });
+      i++; continue;
+    }
+
+    var hMatch = line.match(/^(#{1,6})\s+(.+)$/);
+    if (hMatch) {
+      var lvl = Math.min(hMatch[1].length, 6);
+      blocks.push({ type: 'header', data: { text: inlineMdToHtml(hMatch[2]), level: lvl } });
+      i++; continue;
+    }
+
+    if (line.trim().startsWith('```')) {
+      var code = [];
+      i++;
+      while (i < lines.length && !lines[i].trim().startsWith('```')) {
+        code.push(lines[i]);
+        i++;
+      }
+      blocks.push({ type: 'code', data: { code: code.join('\n') } });
+      i++; continue;
+    }
+
+    if (line.trim().startsWith('> ')) {
+      var quoteLines = [];
+      while (i < lines.length && lines[i].trim().startsWith('> ')) {
+        quoteLines.push(lines[i].trim().substring(2));
+        i++;
+      }
+      blocks.push({ type: 'quote', data: { text: inlineMdToHtml(quoteLines.join('<br>')), caption: '' } });
+      continue;
+    }
+
+    if (/^\s*-\s+\[[ x]\]\s+/.test(line)) {
+      var checkItems = [];
+      while (i < lines.length && /^\s*-\s+\[[ x]\]\s+/.test(lines[i])) {
+        var cm = lines[i].match(/^\s*-\s+\[([ x])\]\s+(.+)$/);
+        if (cm) checkItems.push({ content: inlineMdToHtml(cm[2]), meta: { checked: cm[1] === 'x' }, items: [] });
+        i++;
+      }
+      blocks.push({ type: 'list', data: { style: 'checklist', items: checkItems } });
+      continue;
+    }
+
+    if (/^\s*[-*]\s+/.test(line) && !/^\s*-\s+\[/.test(line)) {
+      var listItems = [];
+      while (i < lines.length && /^\s*[-*]\s+/.test(lines[i]) && !/^\s*-\s+\[/.test(lines[i])) {
+        var lm = lines[i].match(/^\s*[-*]\s+(.+)$/);
+        if (lm) listItems.push({ content: inlineMdToHtml(lm[1]), items: [] });
+        i++;
+      }
+      blocks.push({ type: 'list', data: { style: 'unordered', items: listItems } });
+      continue;
+    }
+
+    if (/^\s*\d+\.\s+/.test(line)) {
+      var olItems = [];
+      while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) {
+        var om = lines[i].match(/^\s*\d+\.\s+(.+)$/);
+        if (om) olItems.push({ content: inlineMdToHtml(om[1]), items: [] });
+        i++;
+      }
+      blocks.push({ type: 'list', data: { style: 'ordered', items: olItems } });
+      continue;
+    }
+
+    var paraLines = [];
+    while (i < lines.length && lines[i].trim() !== '' &&
+           !/^#{1,6}\s/.test(lines[i]) && !/^```/.test(lines[i]) &&
+           !/^>\s/.test(lines[i]) && !/^\s*[-*]\s/.test(lines[i]) &&
+           !/^\s*\d+\.\s/.test(lines[i]) && !/^---\s*$/.test(lines[i].trim()) &&
+           !/^\*\*\*\s*$/.test(lines[i].trim())) {
+      paraLines.push(lines[i]);
+      i++;
+    }
+    if (paraLines.length > 0) {
+      blocks.push({ type: 'paragraph', data: { text: inlineMdToHtml(paraLines.join('<br>')) } });
+    }
+  }
+
+  return blocks.length > 0 ? blocks : [{ type: 'paragraph', data: { text: '' } }];
+}
+
+/* ── Editor.js Blocks → Markdown ────────────────────────── */
+function blocksToMarkdown(blocks) {
+  if (!blocks || blocks.length === 0) return '';
+
+  var parts = [];
+  for (var i = 0; i < blocks.length; i++) {
+    var b = blocks[i];
+    switch (b.type) {
+      case 'header':
+        var prefix = '';
+        for (var h = 0; h < (b.data.level || 2); h++) prefix += '#';
+        parts.push(prefix + ' ' + inlineHtmlToMd(b.data.text));
+        break;
+      case 'paragraph':
+        parts.push(inlineHtmlToMd(b.data.text));
+        break;
+      case 'list':
+        var items = b.data.items || [];
+        var listLines = [];
+        for (var li = 0; li < items.length; li++) {
+          var itemText = typeof items[li] === 'string' ? items[li] : (items[li].content || items[li].text || '');
+          if (b.data.style === 'checklist') {
+            var chk = (typeof items[li] === 'object' && items[li].meta && items[li].meta.checked) ? 'x' : ' ';
+            listLines.push('- [' + chk + '] ' + inlineHtmlToMd(itemText));
+          } else if (b.data.style === 'ordered') {
+            listLines.push((li + 1) + '. ' + inlineHtmlToMd(itemText));
+          } else {
+            listLines.push('- ' + inlineHtmlToMd(itemText));
+          }
+        }
+        parts.push(listLines.join('\n'));
+        break;
+      case 'checklist':
+        var cItems = b.data.items || [];
+        var checkLines = [];
+        for (var ci = 0; ci < cItems.length; ci++) {
+          var check = cItems[ci].checked ? 'x' : ' ';
+          checkLines.push('- [' + check + '] ' + inlineHtmlToMd(cItems[ci].text || cItems[ci].content || ''));
+        }
+        parts.push(checkLines.join('\n'));
+        break;
+      case 'code':
+        parts.push('```\n' + (b.data.code || '') + '\n```');
+        break;
+      case 'quote':
+        var qText = inlineHtmlToMd(b.data.text || '');
+        var qLines = qText.split('\n');
+        var quoteParts = [];
+        for (var qi = 0; qi < qLines.length; qi++) {
+          quoteParts.push('> ' + qLines[qi]);
+        }
+        parts.push(quoteParts.join('\n'));
+        break;
+      case 'delimiter':
+        parts.push('---');
+        break;
+      default:
+        if (b.data && b.data.text) parts.push(inlineHtmlToMd(b.data.text));
+    }
+  }
+  return parts.join('\n\n');
+}
+
+/* ── Editor.js Instance Management ──────────────────────── */
+function initEditor(holderId, markdown, options) {
+  if (typeof EditorJS === 'undefined') {
+    var el = document.getElementById(holderId);
+    if (el) {
+      var ta = document.createElement('textarea');
+      ta.value = markdown || '';
+      ta.className = 'editor-fallback-textarea';
+      ta.placeholder = (options && options.placeholder) || 'Type / for commands...';
+      ta.id = holderId + '-fallback';
+      el.appendChild(ta);
+    }
+    return { _fallback: true, _holderId: holderId };
+  }
+
+  var opts = options || {};
+  var tools = {};
+
+  if (typeof Header !== 'undefined') {
+    tools.header = {
+      class: Header,
+      inlineToolbar: true,
+      config: { levels: [1, 2, 3, 4], defaultLevel: 2 },
+    };
+  }
+  if (typeof EditorjsList !== 'undefined') tools.list = { class: EditorjsList, inlineToolbar: true, config: { maxLevel: 3 } };
+  if (typeof CodeTool !== 'undefined') tools.code = { class: CodeTool };
+  if (typeof Quote !== 'undefined') tools.quote = { class: Quote, inlineToolbar: true, config: { quotePlaceholder: 'Write a quote...', captionPlaceholder: '' } };
+  if (typeof Delimiter !== 'undefined') tools.delimiter = { class: Delimiter };
+  if (typeof Marker !== 'undefined') tools.marker = { class: Marker };
+  if (typeof InlineCode !== 'undefined') tools.inlineCode = { class: InlineCode };
+
+  var blocks = markdownToBlocks(markdown || '');
+
+  var editor = new EditorJS({
+    holder: holderId,
+    tools: tools,
+    data: { blocks: blocks },
+    placeholder: opts.placeholder || 'Type / for commands...',
+    minHeight: opts.minHeight || 0,
+    autofocus: opts.autofocus || false,
+    onChange: opts.onChange || function() {},
+    defaultBlock: 'paragraph',
+    inlineToolbar: ['bold', 'italic', 'link', 'marker', 'inlineCode'],
+  });
+
+  return editor;
+}
+
+async function getEditorMarkdown(editorInstance) {
+  if (!editorInstance) return '';
+  if (editorInstance._fallback) {
+    var ta = document.getElementById(editorInstance._holderId + '-fallback');
+    return ta ? ta.value : '';
+  }
+  try {
+    var data = await editorInstance.save();
+    return blocksToMarkdown(data.blocks);
+  } catch (e) {
+    return '';
+  }
+}
+
+function destroyEditor(editorInstance) {
+  if (!editorInstance) return;
+  if (editorInstance._fallback) return;
+  if (typeof editorInstance.destroy === 'function') {
+    try { editorInstance.destroy(); } catch (e) { /* ignore */ }
+  }
+}
+
+/* ── Simple Markdown → HTML Renderer (readonly mode) ──── */
+function simpleMarkdownRender(md) {
+  if (!md) return '';
+  var lines = md.split('\n');
+  var html = '';
+  var inCode = false;
+  var inList = false;
+  var listType = '';
+
+  for (var i = 0; i < lines.length; i++) {
+    var line = lines[i];
+
+    if (line.trim().startsWith('```')) {
+      if (inCode) { html += '</code></pre>'; inCode = false; }
+      else { html += '<pre><code>'; inCode = true; }
+      continue;
+    }
+    if (inCode) { html += escHtml(line) + '\n'; continue; }
+
+    if (inList && !/^\s*[-*]\s/.test(line) && !/^\s*\d+\.\s/.test(line)) {
+      html += '</' + listType + '>'; inList = false;
+    }
+
+    if (line.trim() === '') { if (!inList) html += '<br>'; continue; }
+    if (/^---\s*$/.test(line.trim())) { html += '<hr>'; continue; }
+
+    var hm = line.match(/^(#{1,6})\s+(.+)$/);
+    if (hm) { html += '<h' + hm[1].length + '>' + inlineMdToHtml(hm[2]) + '</h' + hm[1].length + '>'; continue; }
+
+    if (/^>\s/.test(line)) { html += '<blockquote>' + inlineMdToHtml(line.substring(2)) + '</blockquote>'; continue; }
+
+    if (/^\s*-\s+\[[ x]\]\s/.test(line)) {
+      var chm = line.match(/^\s*-\s+\[([ x])\]\s+(.+)$/);
+      if (chm) {
+        var checked = chm[1] === 'x';
+        html += '<div class="md-check"><span class="md-check-box' + (checked ? ' checked' : '') + '">' + (checked ? '&#10003;' : '') + '</span> ' + inlineMdToHtml(chm[2]) + '</div>';
+      }
+      continue;
+    }
+
+    if (/^\s*[-*]\s+/.test(line)) {
+      if (!inList || listType !== 'ul') { if (inList) html += '</' + listType + '>'; html += '<ul>'; inList = true; listType = 'ul'; }
+      var lmatch = line.match(/^\s*[-*]\s+(.+)$/);
+      if (lmatch) html += '<li>' + inlineMdToHtml(lmatch[1]) + '</li>';
+      continue;
+    }
+    if (/^\s*\d+\.\s+/.test(line)) {
+      if (!inList || listType !== 'ol') { if (inList) html += '</' + listType + '>'; html += '<ol>'; inList = true; listType = 'ol'; }
+      var omatch = line.match(/^\s*\d+\.\s+(.+)$/);
+      if (omatch) html += '<li>' + inlineMdToHtml(omatch[1]) + '</li>';
+      continue;
+    }
+
+    html += '<p>' + inlineMdToHtml(line) + '</p>';
+  }
+
+  if (inCode) html += '</code></pre>';
+  if (inList) html += '</' + listType + '>';
+  return html;
 }
 
+
 /* ══════════════════════════════════════════════════════════════
    BOARD VIEW
    ══════════════════════════════════════════════════════════════ */
@@ -610,7 +1709,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 +1724,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() {
@@ -687,6 +1793,7 @@ function renderCard(f) {
     '<div class="card-meta">' +
       (f.points != null ? '<span class="pill pill-points">' + f.points + ' pts</span>' : '') +
       (f.epic ? '<span class="pill pill-epic" style="background:' + ec + '">' + escHtml(f.epic) + '</span>' : '') +
+      (f.ai && Object.keys(f.ai).length > 0 ? '<span class="pill pill-ai" title="AI properties">&#9889;</span>' : '') +
       (assigned ? '<span class="card-assigned">' + escHtml(assigned) + '</span>' : '') +
     '</div></div>';
 }
@@ -769,7 +1876,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 +1889,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,49 +2076,396 @@ function renderMetrics() {
 }
 
 /* ══════════════════════════════════════════════════════════════
-   DETAIL PANEL — Edit tasks, epics, milestones
+   OVERVIEW VIEW
    ══════════════════════════════════════════════════════════════ */
-var panelState = { open: false, type: null, item: null };
+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; }
 
-function openPanel(type, item) {
-  panelState = { open: true, type: type, item: JSON.parse(JSON.stringify(item)) };
-  renderPanel();
-  document.getElementById('detail-panel').classList.add('open');
-  document.getElementById('panel-overlay').classList.add('open');
-}
+  // 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>';
+  }
 
-function closePanel() {
-  panelState = { open: false, type: null, item: null };
-  document.getElementById('detail-panel').classList.remove('open');
-  document.getElementById('panel-overlay').classList.remove('open');
-}
+  // 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>';
+  }
 
-function renderPanel() {
-  var panel = document.getElementById('detail-panel');
-  var t = panelState.type;
-  var item = panelState.item;
-  if (!item) return;
+  // 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>';
+  }
 
-  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';
+  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);
+      }
+    });
+  });
+}
 
-  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>' +
+/* ══════════════════════════════════════════════════════════════
+   NOTES VIEW — Notion-style split layout
+   ══════════════════════════════════════════════════════════════ */
+
+var notesState = { notes: [], activeId: null, editor: null, dirty: false };
+
+function renderNotes() {
+  var container = document.getElementById('notes-container');
+  if (!container) return;
+
+  container.innerHTML =
+    '<div class="notes-layout">' +
+      '<div class="notes-sidebar">' +
+        '<div class="notes-toolbar">' +
+          '<input type="text" placeholder="Search..." id="notes-search">' +
+          '<button class="btn btn-sm btn-create" id="notes-new">+ New</button>' +
+        '</div>' +
+        '<div class="notes-list" id="notes-list"></div>' +
+      '</div>' +
+      '<div class="notes-editor" id="notes-editor-pane">' +
+        '<div class="notes-empty-state">' +
+          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:48px;height:48px;opacity:.3;margin-bottom:12px"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>' +
+          '<p>Select a note or create a new one</p>' +
+          '<p style="font-size:12px;margin-top:4px;color:var(--text3)">Use <kbd>/</kbd> for block commands</p>' +
+        '</div>' +
+      '</div>' +
     '</div>';
 
-  html += '<div class="panel-body">';
+  loadNoteList();
+
+  document.getElementById('notes-new').addEventListener('click', createNewNote);
+  document.getElementById('notes-search').addEventListener('input', function() {
+    renderNoteList(this.value.toLowerCase());
+  });
+}
+
+async function loadNoteList() {
+  var base = apiBase();
+  var notes = await fetchJson(base + '/notes');
+  notesState.notes = notes || [];
+  renderNoteList('');
+}
+
+function renderNoteList(filter) {
+  var list = document.getElementById('notes-list');
+  if (!list) return;
+
+  var notes = notesState.notes;
+  if (filter) {
+    notes = notes.filter(function(n) {
+      return (n.title || '').toLowerCase().indexOf(filter) !== -1;
+    });
+  }
+
+  notes.sort(function(a, b) {
+    return (b.updated || b.created || '').localeCompare(a.updated || a.created || '');
+  });
+
+  if (notes.length === 0) {
+    list.innerHTML = '<div class="notes-list-empty">No notes yet</div>';
+    return;
+  }
+
+  var html = '';
+  for (var i = 0; i < notes.length; i++) {
+    var n = notes[i];
+    var active = n.id === notesState.activeId ? ' active' : '';
+    html += '<div class="notes-list-item' + active + '" data-id="' + escHtml(n.id) + '">' +
+      '<div class="notes-list-title">' + escHtml(n.title || 'Untitled') + '</div>' +
+      '<div class="notes-list-date">' + escHtml(n.updated || n.created || '') + '</div>' +
+    '</div>';
+  }
+  list.innerHTML = html;
+
+  list.querySelectorAll('.notes-list-item').forEach(function(el) {
+    el.addEventListener('click', function() {
+      selectNote(el.dataset.id);
+    });
+  });
+}
+
+async function selectNote(id) {
+  if (notesState.editor) {
+    destroyEditor(notesState.editor);
+    notesState.editor = null;
+  }
+
+  notesState.activeId = id;
+  renderNoteList(document.getElementById('notes-search') ? document.getElementById('notes-search').value.toLowerCase() : '');
+
+  var pane = document.getElementById('notes-editor-pane');
+  if (!pane) return;
+
+  pane.innerHTML = '<div class="notes-editor-loading">Loading...</div>';
+
+  var base = apiBase();
+  var note = await fetchJson(base + '/notes/' + encodeURIComponent(id));
+  if (!note) {
+    pane.innerHTML = '<div class="notes-empty-state"><p>Note not found</p></div>';
+    return;
+  }
+
+  pane.innerHTML =
+    '<div class="notes-header-bar">' +
+      '<input type="text" class="notes-title-input" id="notes-title" placeholder="Untitled" value="' + escHtml(note.title || '') + '">' +
+      '<span class="notes-meta">' + escHtml(note.updated || note.created || '') + '</span>' +
+    '</div>' +
+    '<div class="notes-editorjs-wrap" id="notes-editorjs"></div>' +
+    '<div class="notes-editor-footer">' +
+      '<button class="btn btn-danger btn-sm" id="notes-delete">Delete</button>' +
+      '<span style="flex:1"></span>' +
+      '<button class="btn btn-primary" id="notes-save">Save</button>' +
+    '</div>';
+
+  notesState.editor = initEditor('notes-editorjs', note.content || '', {
+    placeholder: 'Type / for commands...',
+    autofocus: true,
+    onChange: function() { notesState.dirty = true; }
+  });
+  notesState.dirty = false;
+
+  document.getElementById('notes-save').addEventListener('click', saveCurrentNote);
+  document.getElementById('notes-delete').addEventListener('click', function() {
+    deleteCurrentNote(id);
+  });
+
+  // Ctrl/Cmd+S to save
+  pane.addEventListener('keydown', function(e) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+      e.preventDefault();
+      saveCurrentNote();
+    }
+  });
+}
+
+async function saveCurrentNote() {
+  if (!notesState.activeId) return;
+
+  var titleEl = document.getElementById('notes-title');
+  var title = titleEl ? titleEl.value : '';
+  var content = notesState.editor ? await getEditorMarkdown(notesState.editor) : '';
+
+  var updates = {};
+  var current = notesState.notes.find(function(n) { return n.id === notesState.activeId; });
+  if (title && (!current || title !== current.title)) updates.title = title;
+  updates.content = content;
+  updates.updated = new Date().toISOString().split('T')[0];
+
+  var ok = await patchItem('notes', notesState.activeId, updates);
+  if (ok) {
+    notesState.dirty = false;
+    await loadNoteList();
+  }
+}
+
+async function createNewNote() {
+  var result = await createItem('notes', { title: 'Untitled', content: '' });
+  if (result && result.id) {
+    await loadNoteList();
+    selectNote(result.id);
+  }
+}
+
+async function deleteCurrentNote(id) {
+  if (!confirm('Delete this note?')) return;
+  var ok = await deleteItem('notes', id);
+  if (ok) {
+    if (notesState.editor) {
+      destroyEditor(notesState.editor);
+      notesState.editor = null;
+    }
+    notesState.activeId = null;
+    await loadNoteList();
+    var pane = document.getElementById('notes-editor-pane');
+    if (pane) {
+      pane.innerHTML =
+        '<div class="notes-empty-state">' +
+          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:48px;height:48px;opacity:.3;margin-bottom:12px"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>' +
+          '<p>Select a note or create a new one</p>' +
+        '</div>';
+    }
+  }
+}
+
+
+/* ══════════════════════════════════════════════════════════════
+   CRUD HELPERS
+   ══════════════════════════════════════════════════════════════ */
+function isSourceWritable() {
+  if (!hasWorkspace() || !D.activeSource) return true;
+  var src = D.config.workspace.sources.find(function(s) { return s.name === D.activeSource; });
+  return src ? !src.readonly : true;
+}
+
+function openCreateDialog(collection) {
+  var item = { _isNew: true };
+
+  if (collection === 'tasks') {
+    var ms = D.milestones.length > 0 ? (D.milestones[0].id || D.milestones[0]._dir || '') : '';
+    var ep = D.epics.length > 0 ? (D.epics[0]._dir || D.epics[0].id || '') : '';
+    item.title = '';
+    item.status = 'backlog';
+    item.priority = '';
+    item.points = null;
+    item.assigned = '';
+    item.sprint = '';
+    item.milestone = ms;
+    item.epic = ep;
+    item.content = '';
+  } else if (collection === 'milestones') {
+    item.title = '';
+    item.status = 'planned';
+    item.deadline = '';
+    item.content = '';
+  } else if (collection === 'epics') {
+    var ms = D.milestones.length > 0 ? (D.milestones[0]._dir || D.milestones[0].id || '') : '';
+    item.title = '';
+    item.status = 'active';
+    item.priority = '';
+    item.milestone = ms;
+    item.content = '';
+  }
+
+  panelState = { open: true, type: collection, item: item, isCreate: true, editor: null };
+  renderPanel();
+  document.getElementById('detail-panel').classList.add('open');
+  document.getElementById('panel-overlay').classList.add('open');
+}
+
+/* ══════════════════════════════════════════════════════════════
+   DETAIL PANEL — Notion-style: form top + editor bottom
+   ══════════════════════════════════════════════════════════════ */
+var panelState = { open: false, type: null, item: null, isCreate: false, editor: null };
+
+function openPanel(type, item) {
+  panelState = { open: true, type: type, item: JSON.parse(JSON.stringify(item)), isCreate: false, editor: null };
+  renderPanel();
+  document.getElementById('detail-panel').classList.add('open');
+  document.getElementById('panel-overlay').classList.add('open');
+}
+
+function closePanel() {
+  if (panelState.editor) { destroyEditor(panelState.editor); panelState.editor = null; }
+  panelState = { open: false, type: null, item: null, editor: null };
+  document.getElementById('detail-panel').classList.remove('open');
+  document.getElementById('panel-overlay').classList.remove('open');
+}
+
+function renderPanel() {
+  var panel = document.getElementById('detail-panel');
+  var t = panelState.type;
+  var item = panelState.item;
+  var isCreate = panelState.isCreate;
+  if (!item) return;
 
-  // Title
-  html += '<div class="panel-field"><label>Title</label><input type="text" id="p-title" value="' + escHtml(item.title || '') + '"></div>';
+  var isReadonly = !isCreate && item.readonly;
 
-  // Status + Priority row
-  html += '<div class="panel-props">';
+  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';
 
-  // Status — derived from config
+  // ── Header ──
+  var html = '<div class="panel-header">' +
+    '<span class="panel-type">' + escHtml(isCreate ? 'New ' + typeLabel : typeLabel) + '</span>' +
+    '<span class="panel-item-id">' + escHtml(isCreate ? '' : (item.id || '')) + '</span>';
+
+  if (item.source && item.sourceColor) {
+    html += '<span class="pill" style="background:' + item.sourceColor + '20;color:' + item.sourceColor + ';font-size:10px">' + escHtml(item.sourceLabel || item.source) + '</span>';
+  }
+
+  html += '<button class="panel-close" id="panel-close-btn">&times;</button></div>';
+
+  // ── Title (large, Notion-style) ──
+  html += '<div class="panel-title-wrap">' +
+    '<input type="text" id="p-title" class="panel-title-input" value="' + escHtml(item.title || '') + '" placeholder="Untitled"' + (isReadonly ? ' disabled' : '') + '>' +
+    '</div>';
+
+  // ── Properties (compact inline) ──
+  html += '<div class="panel-properties">';
+
+  // Properties toggle header
+  html += '<div class="prop-row prop-row-toggle" id="props-toggle"><span class="prop-label" style="font-weight:600"><span class="ai-toggle-arrow" id="props-arrow">&#9654;</span> Properties</span><div class="prop-value"></div></div>';
+  html += '<div class="props-fields-body" id="props-fields-body" style="display:none">';
+
+  // Status
   var statusOptions, statusLabels;
   if (t === 'tasks' && D.config && D.config.statuses && D.config.statuses.task) {
     statusOptions = D.config.statuses.task.map(function(s) { return s.key; });
@@ -1026,61 +2487,322 @@ function renderPanel() {
     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) {
+  html += '<div class="prop-row"><span class="prop-label">Status</span><div class="prop-value"><span id="p-status-icon">' + statusIcon(item.status) + '</span>' +
+    '<select id="p-status"' + (isReadonly ? ' disabled' : '') + '>' + statusOptions.map(function(s) {
       return '<option value="' + s + '"' + (item.status === s ? ' selected' : '') + '>' + (statusLabels[s] || s) + '</option>';
     }).join('') + '</select></div></div>';
 
-  // 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) {
+    html += '<div class="prop-row"><span class="prop-label">Priority</span><div class="prop-value"><span id="p-priority-icon">' + priorityIcon(item.priority) + '</span>' +
+      '<select id="p-priority"' + (isReadonly ? ' disabled' : '') + '><option value="">None</option>' + PRIORITIES.map(function(p) {
         return '<option value="' + p + '"' + (item.priority === p ? ' selected' : '') + '>' + (PRIORITY_LABELS[p] || p) + '</option>';
       }).join('') + '</select></div></div>';
   }
 
-  html += '</div>'; // close panel-props
-
-  // 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="prop-row"><span class="prop-label">Points</span><div class="prop-value"><input type="number" id="p-points" min="0" max="100" value="' + (item.points != null ? item.points : '') + '" placeholder="0"' + (isReadonly ? ' disabled' : '') + '></div></div>';
 
     var assignedVal = Array.isArray(item.assigned) ? item.assigned.join(', ') : (item.assigned || '');
-    html += '<div class="panel-field"><label>Assigned</label><input type="text" id="p-assigned" value="' + escHtml(assignedVal) + '" placeholder="agent-name"></div>';
-    html += '</div>';
+    html += '<div class="prop-row"><span class="prop-label">Assigned</span><div class="prop-value"><input type="text" id="p-assigned" value="' + escHtml(assignedVal) + '" placeholder="Unassigned"' + (isReadonly ? ' disabled' : '') + '></div></div>';
 
-    html += '<div class="panel-props">';
-    // Sprint
-    html += '<div class="panel-field"><label>Sprint</label><select id="p-sprint"><option value="">None</option>' +
+    html += '<div class="prop-row"><span class="prop-label">Sprint</span><div class="prop-value"><select id="p-sprint"' + (isReadonly ? ' disabled' : '') + '><option value="">None</option>' +
       D.allSprints.map(function(s) { return '<option value="' + escHtml(s.id || '') + '"' + (item.sprint === s.id ? ' selected' : '') + '>' + escHtml(s.id || '') + '</option>'; }).join('') +
-      '</select></div>';
-
-    // 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>';
+      '</select></div></div>';
+
+    if (isCreate) {
+      html += '<div class="prop-row"><span class="prop-label">Milestone</span><div class="prop-value"><select id="p-milestone">' +
+        D.milestones.map(function(m) { return '<option value="' + escHtml(m._dir || m.id || '') + '"' + (item.milestone === (m._dir || m.id) ? ' selected' : '') + '>' + escHtml(m.title || m.id || '') + '</option>'; }).join('') +
+        '</select></div></div>';
+      html += '<div class="prop-row"><span class="prop-label">Epic</span><div class="prop-value"><select id="p-epic-select">' +
+        D.epics.map(function(e) { return '<option value="' + escHtml(e._dir || e.id || '') + '"' + (item.epic === (e._dir || e.id) ? ' selected' : '') + '>' + escHtml(e.title || e.id || '') + '</option>'; }).join('') +
+        '</select></div></div>';
+    } else {
+      html += '<div class="prop-row"><span class="prop-label">Epic</span><div class="prop-value"><span class="prop-text">' + escHtml(item.epic || 'None') + '</span></div></div>';
+    }
   }
 
   if (t === 'milestones') {
-    html += '<div class="panel-field"><label>Deadline</label><input type="date" id="p-deadline" value="' + fmtDate(item.deadline) + '"></div>';
+    html += '<div class="prop-row"><span class="prop-label">Deadline</span><div class="prop-value"><input type="date" id="p-deadline" value="' + fmtDate(item.deadline) + '"' + (isReadonly ? ' disabled' : '') + '></div></div>';
   }
 
-  // Description / Content
-  html += '<div class="panel-field"><label>Description</label><textarea id="p-content">' + escHtml(item.content || '') + '</textarea></div>';
+  if (isCreate && (t === 'epics' || t === 'milestones')) {
+    if (t === 'epics') {
+      html += '<div class="prop-row"><span class="prop-label">Milestone</span><div class="prop-value"><select id="p-milestone">' +
+        D.milestones.map(function(m) { return '<option value="' + escHtml(m._dir || m.id || '') + '">' + escHtml(m.title || m.id || '') + '</option>'; }).join('') +
+        '</select></div></div>';
+    }
+  }
 
-  html += '</div>'; // close panel-body
+  // Links
+  if (t === 'tasks' && !isCreate && item.links && Array.isArray(item.links) && item.links.length > 0) {
+    html += '<div class="prop-row"><span class="prop-label">Links</span><div class="prop-value"><div class="link-chips">';
+    item.links.forEach(function(link) {
+      var parts = String(link).split(':');
+      var srcName = parts.length === 2 ? parts[0] : null;
+      var srcColor = 'var(--accent)';
+      if (srcName && D.config && D.config.workspace && D.config.workspace.sources) {
+        var src = D.config.workspace.sources.find(function(s) { return s.name === srcName; });
+        if (src && src.color) srcColor = src.color;
+      }
+      html += '<span class="link-chip" data-link="' + escHtml(String(link)) + '">' +
+        '<span class="link-chip-dot" style="background:' + srcColor + '"></span>' +
+        escHtml(String(link)) + '</span>';
+    });
+    html += '</div></div></div>';
+  }
 
-  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>';
+  // Reverse links
+  if (t === 'tasks' && !isCreate && D.overviewLinks && D.overviewLinks.reverseLinks && item.id) {
+    var reverseRefs = D.overviewLinks.reverseLinks[item.id] || [];
+    if (reverseRefs.length > 0) {
+      html += '<div class="prop-row"><span class="prop-label">Referenced By</span><div class="prop-value"><div class="link-chips">';
+      reverseRefs.forEach(function(ref) {
+        var srcColor = ref.sourceColor || 'var(--accent)';
+        html += '<span class="link-chip" data-link="' + escHtml(ref.from || '') + '">' +
+          '<span class="link-chip-dot" style="background:' + srcColor + '"></span>' +
+          escHtml(ref.from || '') + '</span>';
+      });
+      html += '</div></div></div>';
+    }
+  }
+
+  html += '</div>'; // close props-fields-body
+
+  // ── AI Properties — integrated as prop-rows ──
+  var aiData = item.ai || {};
+  var aiOwnData = item.aiOwn || {};
+  var aiFieldDefs = [
+    { key: 'skills', label: 'Skills', icon: '<svg class="icon icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>' },
+    { key: 'agents', label: 'Agents', icon: '<svg class="icon icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="3"/><circle cx="9" cy="16" r="1" fill="currentColor"/><circle cx="15" cy="16" r="1" fill="currentColor"/></svg>' },
+    { key: 'mcps', label: 'MCPs', icon: '<svg class="icon icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="M9 9h6v6H9z"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3"/></svg>' },
+    { key: 'commands', label: 'Commands', icon: '<svg class="icon icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>' },
+    { key: 'context', label: 'Context', icon: '<svg class="icon icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>' }
+  ];
+  var aiTotalCount = 0;
+  for (var ai = 0; ai < aiFieldDefs.length; ai++) {
+    var arr = aiData[aiFieldDefs[ai].key];
+    if (arr) aiTotalCount += arr.length;
+  }
+  var showAiSection = aiTotalCount > 0 || !isReadonly;
+  if (showAiSection) {
+    // AI divider row — clickable toggle
+    html += '<div class="prop-row prop-row-divider prop-row-toggle" id="ai-toggle"><span class="prop-label" style="font-weight:600"><span class="ai-toggle-arrow" id="ai-arrow">&#9654;</span> AI</span><div class="prop-value">';
+    if (aiTotalCount > 0) html += '<span class="pill" style="font-size:10px;padding:1px 6px">' + aiTotalCount + '</span>';
+    html += '</div></div>';
+    html += '<div class="ai-fields-body" id="ai-fields-body" style="display:none">';
+    for (var ag = 0; ag < aiFieldDefs.length; ag++) {
+      var def = aiFieldDefs[ag];
+      var resolved = aiData[def.key] || [];
+      var own = aiOwnData[def.key] || [];
+      var inherited = resolved.filter(function(v) { return own.indexOf(v) === -1; });
+      if (isReadonly && resolved.length === 0) continue;
+      html += '<div class="prop-row"><span class="prop-label">' + def.icon + ' ' + escHtml(def.label) + '</span><div class="prop-value">';
+      if (isReadonly) {
+        // Readonly: just show tags
+        for (var ci = 0; ci < resolved.length; ci++) {
+          var isOwn = own.indexOf(resolved[ci]) !== -1;
+          html += '<span class="ai-tag' + (isOwn ? ' ai-tag-own' : ' ai-tag-inherited') + '">' + escHtml(resolved[ci]) + '</span>';
+        }
+      } else {
+        // Editable: tag input container
+        html += '<div class="ai-tag-input" data-ai-field="' + def.key + '">';
+        // Inherited tags (dashed, no remove)
+        for (var ii = 0; ii < inherited.length; ii++) {
+          html += '<span class="ai-tag ai-tag-inherited">' + escHtml(inherited[ii]) + '</span>';
+        }
+        // Own tags (accent, with remove button)
+        for (var oi = 0; oi < own.length; oi++) {
+          html += '<span class="ai-tag ai-tag-own"><span class="ai-tag-val">' + escHtml(own[oi]) + '</span><button class="ai-tag-remove" type="button">&times;</button></span>';
+        }
+        // Text input for adding
+        html += '<input type="text" class="ai-tag-text" placeholder="Add...">';
+        // Autocomplete dropdown
+        html += '<div class="ai-autocomplete"></div>';
+        html += '</div>';
+      }
+      html += '</div></div>';
+    }
+    html += '</div>'; // close ai-fields-body
+  }
+
+  html += '</div>'; // close panel-properties
+
+  // ── Content Editor (fills remaining space) ──
+  if (isReadonly) {
+    html += '<div class="panel-content-area"><div id="p-content-editor" class="panel-editor-zone md-rendered">' + simpleMarkdownRender(item.content || '') + '</div></div>';
+  } else {
+    html += '<div class="panel-content-area"><div id="p-content-editor" class="panel-editor-zone"></div></div>';
+  }
+
+  // ── Footer ──
+  html += '<div class="panel-footer">';
+  if (!isCreate && !isReadonly && isSourceWritable()) {
+    html += '<button class="btn btn-danger btn-sm" id="panel-archive-btn">Archive</button>';
+  }
+  html += '<span style="flex:1"></span>';
+  html += '<button class="btn" id="panel-cancel-btn">Cancel</button>';
+  if (!isReadonly) {
+    html += '<button class="btn btn-primary" id="panel-save-btn">' + (isCreate ? 'Create' : 'Save') + '</button>';
+  }
+  html += '</div>';
 
   panel.innerHTML = html;
 
+  // Initialize Editor.js for content (if not readonly)
+  if (!isReadonly) {
+    panelState.editor = initEditor('p-content-editor', item.content || '', {
+      placeholder: 'Type / for commands, or start writing...',
+      minHeight: 0,
+    });
+  }
+
   // Event listeners
   document.getElementById('panel-close-btn').addEventListener('click', closePanel);
   document.getElementById('panel-cancel-btn').addEventListener('click', closePanel);
-  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() + '?')) return;
+      deleteItem(t, item.id).then(function(ok) {
+        if (ok) { closePanel(); refreshData(); }
+      });
+    });
+  }
+
+  // Properties section toggle
+  var propsToggle = document.getElementById('props-toggle');
+  if (propsToggle) {
+    propsToggle.addEventListener('click', function() {
+      var body = document.getElementById('props-fields-body');
+      var arrow = document.getElementById('props-arrow');
+      if (body.style.display === 'none') {
+        body.style.display = '';
+        arrow.innerHTML = '&#9660;';
+      } else {
+        body.style.display = 'none';
+        arrow.innerHTML = '&#9654;';
+      }
+    });
+  }
+
+  // AI section toggle
+  var aiToggle = document.getElementById('ai-toggle');
+  if (aiToggle) {
+    aiToggle.addEventListener('click', function() {
+      var body = document.getElementById('ai-fields-body');
+      var arrow = document.getElementById('ai-arrow');
+      if (body.style.display === 'none') {
+        body.style.display = '';
+        arrow.innerHTML = '&#9660;';
+      } else {
+        body.style.display = 'none';
+        arrow.innerHTML = '&#9654;';
+      }
+    });
+  }
+
+  // AI tag input event listeners
+  panel.querySelectorAll('.ai-tag-input').forEach(function(container) {
+    var field = container.dataset.aiField;
+    var textInput = container.querySelector('.ai-tag-text');
+    var dropdown = container.querySelector('.ai-autocomplete');
+    if (!textInput || !dropdown) return;
+
+    function getOwnValues() {
+      var vals = [];
+      container.querySelectorAll('.ai-tag-own .ai-tag-val').forEach(function(el) {
+        vals.push(el.textContent);
+      });
+      return vals;
+    }
+
+    function getAllValues() {
+      var vals = [];
+      container.querySelectorAll('.ai-tag').forEach(function(el) {
+        var valEl = el.querySelector('.ai-tag-val');
+        vals.push(valEl ? valEl.textContent : el.textContent);
+      });
+      return vals;
+    }
+
+    function addTag(value) {
+      var v = value.trim();
+      if (!v) return;
+      var existing = getAllValues();
+      if (existing.indexOf(v) !== -1) return;
+      var tag = document.createElement('span');
+      tag.className = 'ai-tag ai-tag-own';
+      tag.innerHTML = '<span class="ai-tag-val">' + escHtml(v) + '</span><button class="ai-tag-remove" type="button">&times;</button>';
+      tag.querySelector('.ai-tag-remove').addEventListener('click', function() { tag.remove(); });
+      container.insertBefore(tag, textInput);
+      textInput.value = '';
+      closeDropdown();
+    }
+
+    function closeDropdown() {
+      dropdown.classList.remove('open');
+      dropdown.innerHTML = '';
+    }
+
+    function showDropdown() {
+      var suggestions = D.aiSuggestions ? (D.aiSuggestions[field] || []) : [];
+      var present = getAllValues();
+      var query = textInput.value.trim().toLowerCase();
+      var filtered = suggestions.filter(function(s) {
+        return present.indexOf(s) === -1 && (!query || s.toLowerCase().indexOf(query) !== -1);
+      });
+      if (filtered.length === 0) { closeDropdown(); return; }
+      dropdown.innerHTML = '';
+      filtered.forEach(function(s) {
+        var item = document.createElement('div');
+        item.className = 'ai-autocomplete-item';
+        item.textContent = s;
+        item.addEventListener('mousedown', function(e) {
+          e.preventDefault();
+          addTag(s);
+        });
+        dropdown.appendChild(item);
+      });
+      dropdown.classList.add('open');
+    }
+
+    // Click on × to remove own tag
+    container.querySelectorAll('.ai-tag-remove').forEach(function(btn) {
+      btn.addEventListener('click', function() { btn.closest('.ai-tag').remove(); });
+    });
+
+    // Click on container focuses input
+    container.addEventListener('click', function(e) {
+      if (e.target === container) textInput.focus();
+    });
+
+    // Input typing → show autocomplete
+    textInput.addEventListener('input', showDropdown);
+    textInput.addEventListener('focus', showDropdown);
+
+    // Enter → add tag
+    textInput.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        if (textInput.value.trim()) addTag(textInput.value);
+      } else if (e.key === 'Backspace' && textInput.value === '') {
+        // Remove last own tag
+        var ownTags = container.querySelectorAll('.ai-tag-own');
+        if (ownTags.length > 0) ownTags[ownTags.length - 1].remove();
+      } else if (e.key === 'Escape') {
+        closeDropdown();
+        textInput.blur();
+      }
+    });
+
+    // Close dropdown on blur
+    textInput.addEventListener('blur', function() {
+      setTimeout(closeDropdown, 150);
+    });
+  });
 
   // Live icon updates
   var statusSel = document.getElementById('p-status');
@@ -1097,6 +2819,31 @@ function renderPanel() {
       if (iconEl) iconEl.innerHTML = priorityIcon(prioritySel.value);
     });
   }
+
+  // Ctrl/Cmd+S to save
+  panel.addEventListener('keydown', function(e) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+      e.preventDefault();
+      if (isCreate) saveCreatePanel();
+      else savePanel();
+    }
+  });
+
+  // Link chip click handlers
+  panel.querySelectorAll('.link-chip[data-link]').forEach(function(chip) {
+    chip.addEventListener('click', function() {
+      var ref = chip.dataset.link;
+      var parts = ref.split(':');
+      if (parts.length === 2 && hasWorkspace()) {
+        closePanel();
+        switchSource(parts[0]);
+        setTimeout(function() {
+          var task = D.tasks.find(function(t) { return t.id === ref || t.id === parts[1]; });
+          if (task) openPanel('tasks', task);
+        }, 500);
+      }
+    });
+  });
 }
 
 async function savePanel() {
@@ -1140,8 +2887,30 @@ async function savePanel() {
     if (deadlineEl && deadlineEl.value !== fmtDate(item.deadline)) updates.deadline = deadlineEl.value || null;
   }
 
-  var contentEl = document.getElementById('p-content');
-  if (contentEl && contentEl.value !== (item.content || '')) updates.content = contentEl.value;
+  if (panelState.editor) {
+    var newContent = await getEditorMarkdown(panelState.editor);
+    if (newContent !== (item.content || '')) updates.content = newContent;
+  }
+
+  // AI properties — read from tag inputs
+  var aiTagInputs = document.querySelectorAll('.ai-tag-input[data-ai-field]');
+  if (aiTagInputs.length > 0) {
+    var aiObj = {};
+    aiTagInputs.forEach(function(container) {
+      var field = container.dataset.aiField;
+      var vals = [];
+      container.querySelectorAll('.ai-tag-own .ai-tag-val').forEach(function(el) {
+        var v = el.textContent.trim();
+        if (v) vals.push(v);
+      });
+      if (vals.length > 0) aiObj[field] = vals;
+    });
+    if (Object.keys(aiObj).length > 0) {
+      updates.ai = aiObj;
+    } else if (item.aiOwn && Object.keys(item.aiOwn).length > 0) {
+      updates.ai = null;
+    }
+  }
 
   if (Object.keys(updates).length === 0) {
     showToast('No changes to save', 'success');
@@ -1156,22 +2925,290 @@ 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;
+  }
+
+  if (panelState.editor) {
+    var editorContent = await getEditorMarkdown(panelState.editor);
+    if (editorContent) data.content = editorContent;
+  }
+
+  // AI properties — read from tag inputs
+  var aiTagInputs = document.querySelectorAll('.ai-tag-input[data-ai-field]');
+  if (aiTagInputs.length > 0) {
+    var aiObj = {};
+    aiTagInputs.forEach(function(container) {
+      var field = container.dataset.aiField;
+      var vals = [];
+      container.querySelectorAll('.ai-tag-own .ai-tag-val').forEach(function(el) {
+        var v = el.textContent.trim();
+        if (v) vals.push(v);
+      });
+      if (vals.length > 0) aiObj[field] = vals;
+    });
+    if (Object.keys(aiObj).length > 0) data.ai = aiObj;
+  }
+
+  var result = await createItem(t, data);
+  if (result) {
+    closePanel();
+    refreshData();
+  }
+}
+
 // Close panel on overlay click or Escape
 document.getElementById('panel-overlay').addEventListener('click', closePanel);
 document.addEventListener('keydown', function(e) {
   if (e.key === 'Escape' && panelState.open) closePanel();
 });
 
+
+/* ══════════════════════════════════════════════════════════════
+   HISTORY — Project switch modal
+   ══════════════════════════════════════════════════════════════ */
+
+function openHistoryModal() {
+  var overlay = document.getElementById('history-overlay');
+  var modal = document.getElementById('history-modal');
+  if (!overlay || !modal) return;
+
+  overlay.classList.add('open');
+  modal.classList.add('open');
+  modal.innerHTML = '<div class="history-header"><h2>Switch Project</h2><button class="panel-close" id="history-close">&times;</button></div><div class="history-body"><div class="history-loading">Loading...</div></div>';
+
+  document.getElementById('history-close').onclick = closeHistoryModal;
+  overlay.onclick = closeHistoryModal;
+
+  fetchJson('/api/history').then(function(entries) {
+    renderHistoryList(entries || []);
+  });
+}
+
+function closeHistoryModal() {
+  var overlay = document.getElementById('history-overlay');
+  var modal = document.getElementById('history-modal');
+  if (overlay) overlay.classList.remove('open');
+  if (modal) modal.classList.remove('open');
+}
+
+function renderHistoryList(entries) {
+  var modal = document.getElementById('history-modal');
+  if (!modal) return;
+
+  var body = modal.querySelector('.history-body');
+  if (!body) return;
+
+  if (entries.length === 0) {
+    body.innerHTML = '<div class="history-empty">No projects in history yet.<br>Open mdboard from a project directory to add it.</div>';
+    return;
+  }
+
+  // Sort: current first, then by lastOpened descending
+  entries.sort(function(a, b) {
+    if (a.isCurrent && !b.isCurrent) return -1;
+    if (!a.isCurrent && b.isCurrent) return 1;
+    return new Date(b.lastOpened) - new Date(a.lastOpened);
+  });
+
+  var html = '';
+  for (var i = 0; i < entries.length; i++) {
+    var e = entries[i];
+    var initial = (e.name || 'P').charAt(0).toUpperCase();
+    var relTime = timeAgo(e.lastOpened);
+    var currentClass = e.isCurrent ? ' history-item-current' : '';
+    var currentBadge = e.isCurrent ? '<span class="history-current-badge">Current</span>' : '';
+
+    html += '<div class="history-item' + currentClass + '" data-path="' + escHtml(e.path) + '">' +
+      '<div class="history-item-icon">' + escHtml(initial) + '</div>' +
+      '<div class="history-item-info">' +
+        '<div class="history-item-name">' + escHtml(e.name) + currentBadge + '</div>' +
+        '<div class="history-item-path">' + escHtml(e.path) + '</div>' +
+      '</div>' +
+      '<div class="history-item-time">' + escHtml(relTime) + '</div>' +
+    '</div>';
+  }
+
+  body.innerHTML = html;
+
+  // Attach click handlers
+  var items = body.querySelectorAll('.history-item');
+  for (var j = 0; j < items.length; j++) {
+    items[j].addEventListener('click', function() {
+      var itemPath = this.getAttribute('data-path');
+      if (this.classList.contains('history-item-current')) return;
+      switchProject(itemPath);
+    });
+  }
+}
+
+function switchProject(projectPath) {
+  var body = document.querySelector('#history-modal .history-body');
+  if (body) body.innerHTML = '<div class="history-loading">Switching project...</div>';
+
+  fetch('/api/history/switch', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path: projectPath }),
+  })
+  .then(function(r) { return r.json(); })
+  .then(function(data) {
+    if (data && data.ok) {
+      closeHistoryModal();
+      // Reload everything — the SSE event will also trigger for other tabs
+      D.activeSource = null;
+      D.loaded = false;
+      loadAll().then(function() {
+        initFromConfig();
+        if (hasWorkspace()) {
+          buildSourceRail();
+          D.activeSource = null;
+          switchSource('overview');
+        } else {
+          renderAll();
+          renderSidebarLogo();
+          // Hide source rail if no workspace
+          var rail = document.getElementById('source-rail');
+          if (rail) rail.innerHTML = '';
+        }
+      });
+      showToast('Switched to ' + (data.name || 'project'), 'success');
+    } else {
+      showToast('Error: ' + (data.error || 'Switch failed'), 'error');
+      closeHistoryModal();
+    }
+  })
+  .catch(function(err) {
+    showToast('Error: ' + err.message, 'error');
+    closeHistoryModal();
+  });
+}
+
+function checkAutoOpenHistory() {
+  if (D.config && D.config.hasProject === false) {
+    openHistoryModal();
+  }
+}
+
+function timeAgo(dateStr) {
+  if (!dateStr) return '';
+  var now = Date.now();
+  var then = new Date(dateStr).getTime();
+  var diff = Math.floor((now - then) / 1000);
+  if (diff < 60) return 'just now';
+  if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
+  if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
+  if (diff < 604800) return Math.floor(diff / 86400) + 'd ago';
+  return new Date(dateStr).toLocaleDateString();
+}
+
+
+/* ══════════════════════════════════════════════════════════════
+   RENDER
+   ══════════════════════════════════════════════════════════════ */
+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() {
+  renderSidebarLogo();
+
+  var mw = document.getElementById('h-milestone-wrap');
+  var am = D.milestones.find(function(m) { return m.status === 'active'; });
+  if (am) {
+    mw.style.display = '';
+    document.getElementById('h-milestone-name').textContent = am.title || am.id || '';
+    document.getElementById('h-milestone-progress').style.width = (am.progress || 0) + '%';
+  } else { mw.style.display = 'none'; }
+
+  var sw = document.getElementById('h-sprint-wrap');
+  var as = D.sprints.find(function(s) { return s.status === 'active'; });
+  if (as) {
+    sw.style.display = '';
+    document.getElementById('h-sprint-name').textContent = as.goal || as.id || '';
+    var dr = daysRemaining(as.end_date);
+    document.getElementById('h-sprint-days').textContent = dr !== null ? (dr >= 0 ? dr + ' days left' : Math.abs(dr) + ' days over') : '';
+  } else { sw.style.display = 'none'; }
+
+  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">' + 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>';
+}
+
 /* ══════════════════════════════════════════════════════════════
    NAVIGATION
    ══════════════════════════════════════════════════════════════ */
 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();
+  }
+  // Trigger notes rendering when switching to it
+  if (name === 'notes' && D.loaded) {
+    renderNotes();
+  }
 }
 
 document.getElementById('sidebar-nav').addEventListener('click', function(e) {
@@ -1183,12 +3220,124 @@ 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','notes'];
   switchView(valid.indexOf(hash) !== -1 ? hash : 'board');
 }
 window.addEventListener('hashchange', handleHash);
 
+/* ══════════════════════════════════════════════════════════════
+   SETTINGS PANEL
+   ══════════════════════════════════════════════════════════════ */
+var _settingsState = { selectedTheme: null, originalTheme: null };
+
+function openSettings() {
+  var active = getActiveTheme();
+  _settingsState.originalTheme = active;
+  _settingsState.selectedTheme = null;
+  document.getElementById('settings-overlay').classList.add('open');
+  document.getElementById('settings-panel').classList.add('open');
+  var toggle = document.getElementById('theme-default-toggle');
+  if (toggle) toggle.checked = false;
+  renderThemeGrid();
+}
+
+function closeSettings() {
+  if (_settingsState.selectedTheme) {
+    revertThemePreview();
+    _settingsState.selectedTheme = null;
+  }
+  document.getElementById('settings-overlay').classList.remove('open');
+  document.getElementById('settings-panel').classList.remove('open');
+}
+
+function renderThemeGrid() {
+  var grid = document.getElementById('theme-grid');
+  var info = document.getElementById('settings-theme-info');
+  var active = getActiveTheme();
+  var selected = _settingsState.selectedTheme;
+
+  if (info) {
+    var displayId = selected || active;
+    var displayTheme = THEMES[displayId];
+    info.textContent = 'Active: ' + (THEMES[active] ? THEMES[active].name : active) +
+      (selected && selected !== active ? ' → Preview: ' + (displayTheme ? displayTheme.name : selected) : '');
+  }
+
+  var html = '';
+  THEME_LIST.forEach(function(t) {
+    var theme = THEMES[t.id];
+    var v = theme.vars;
+    var isSelected = selected ? t.id === selected : t.id === active;
+    var cls = isSelected ? ' active' : '';
+    html += '<div class="theme-card' + cls + '" data-theme="' + t.id + '">' +
+      '<div class="theme-card-preview">' +
+        '<span style="background:' + v.bg + '"></span>' +
+        '<span style="background:' + v.surface + '"></span>' +
+        '<span style="background:' + v.accent + '"></span>' +
+        '<span style="background:' + v.success + '"></span>' +
+        '<span style="background:' + v.warning + '"></span>' +
+      '</div>' +
+      '<div class="theme-card-name">' + escHtml(theme.name) + '</div>' +
+      '<div class="theme-card-type">' + theme.type + '</div>' +
+    '</div>';
+  });
+  grid.innerHTML = html;
+}
+
+function saveTheme() {
+  var themeId = _settingsState.selectedTheme;
+  if (!themeId) {
+    closeSettings();
+    return;
+  }
+  var toggle = document.getElementById('theme-default-toggle');
+  var setDefault = toggle ? toggle.checked : false;
+  var css = generateThemeCss(themeId);
+
+  fetch('/api/theme', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ themeId: themeId, css: css, setDefault: setDefault })
+  }).then(function(r) { return r.json(); }).then(function(data) {
+    if (data && data.ok) {
+      revertThemePreview();
+      reloadCustomCss();
+      D.config.theme = themeId;
+      _settingsState.selectedTheme = null;
+      showToast('Theme saved: ' + (THEMES[themeId] ? THEMES[themeId].name : themeId), 'success');
+      closeSettings();
+    } else {
+      showToast('Error: ' + (data.error || 'Unknown'), 'error');
+    }
+  }).catch(function(e) {
+    showToast('Error: ' + e.message, 'error');
+  });
+}
+
+document.getElementById('settings-toggle').addEventListener('click', function(e) {
+  e.preventDefault();
+  openSettings();
+});
+
+document.getElementById('settings-close').addEventListener('click', closeSettings);
+document.getElementById('settings-overlay').addEventListener('click', closeSettings);
+
+document.getElementById('theme-grid').addEventListener('click', function(e) {
+  var card = e.target.closest('.theme-card');
+  if (!card) return;
+  var themeId = card.dataset.theme;
+  _settingsState.selectedTheme = themeId;
+  applyTheme(themeId);
+  renderThemeGrid();
+});
+
+document.getElementById('settings-save').addEventListener('click', saveTheme);
+
 /* ══════════════════════════════════════════════════════════════
    INIT
    ══════════════════════════════════════════════════════════════ */
@@ -1196,8 +3345,69 @@ 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();
+
+  // Auto-open history modal if no project
+  checkAutoOpenHistory();
+
+  // Keyboard shortcut: Ctrl/Cmd+K to open history modal
+  document.addEventListener('keydown', function(e) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      openHistoryModal();
+    }
+  });
+
+  // Load AI suggestions for autocomplete
+  fetchJson('/api/ai-suggestions').then(function(data) {
+    D.aiSuggestions = data || { skills: [], agents: [], mcps: [], commands: [], context: [] };
+  });
+
+  // Load overview links in background for reverse link display
+  if (hasWorkspace()) {
+    fetchJson('/api/overview/links').then(function(data) {
+      D.overviewLinks = data;
+    });
+  }
 })();
 </script>
 </body>