mdboard 1.3.0 → 2.1.0

package/index.html

@@ -67,31 +67,45 @@ a{color:var(--accent);text-decoration:none}
 .stat-val{font-size:20px;font-weight:700;font-family:var(--mono);line-height:1.2}
 .stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);font-weight:500}
 
+/* ── Global Search ───────────────────────────────────────── */
+.global-search-wrap{position:relative;flex:1;max-width:400px}
+.global-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text3);pointer-events:none}
+.global-search-input{width:100%;padding:8px 12px 8px 34px;font-size:13px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text);outline:none;font-family:inherit;transition:border-color .2s,box-shadow .2s}
+.global-search-input::placeholder{color:var(--text3)}
+.global-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent)}
+.global-search-results{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.3);max-height:360px;overflow-y:auto;z-index:100}
+.gs-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px;transition:background .1s}
+.gs-item:hover,.gs-item.active{background:var(--surface2)}
+.gs-item .icon{width:16px;height:16px;flex-shrink:0}
+.gs-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
+.gs-meta{font-size:11px;color:var(--text3);font-family:var(--mono);flex-shrink:0}
+.gs-type{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);background:var(--surface2);padding:2px 6px;border-radius:4px;flex-shrink:0}
+.gs-empty{padding:16px;text-align:center;color:var(--text3);font-size:13px}
+
 /* ── Content ─────────────────────────────────────────────── */
 .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}
 .icon-sm{width:14px;height:14px}
 
-/* ── Filters ─────────────────────────────────────────────── */
-.filter-bar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
-.filter-bar input,.filter-bar select{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:var(--radius-sm);font-size:12px;font-family:var(--font)}
-.filter-bar input{min-width:160px;flex:1;max-width:280px}
-.filter-bar select{min-width:110px}
-.filter-bar input:focus,.filter-bar select:focus{outline:none;border-color:var(--accent)}
-.filter-bar label{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
+/* ── View Toolbar & Filters ─────────────────────────────── */
+.view-toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
+.view-toolbar input,.view-toolbar select{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:var(--radius-sm);font-size:12px;font-family:var(--font)}
+.view-toolbar input{min-width:160px;flex:1;max-width:280px}
+.view-toolbar select{min-width:110px}
+.view-toolbar input:focus,.view-toolbar select:focus{outline:none;border-color:var(--accent)}
+
+/* ── Layout Switcher ────────────────────────────────────── */
+.layout-switcher{display:flex;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px}
+.layout-btn{padding:4px 12px;border:none;background:transparent;color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;border-radius:var(--radius-sm);font-family:var(--font);transition:all .15s}
+.layout-btn:hover{color:var(--text)}
+.layout-btn.active{background:var(--accent-dim);color:var(--accent)}
 
 /* ── Board View ──────────────────────────────────────────── */
-#sprint-bar{display:flex;align-items:center;gap:20px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;font-size:13px}
-.sprint-goal{flex:1}
-.sprint-goal b{color:var(--text)}
-.sprint-dates{font-size:12px;color:var(--text2);font-family:var(--mono)}
-#board{display:flex;gap:12px;min-height:400px;overflow-x:auto;padding-bottom:16px}
+.board-container{display:flex;gap:12px;min-height:400px;overflow-x:auto;padding-bottom:16px}
 .column{flex:1;min-width:220px;max-width:300px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;transition:border-color .2s,background .2s}
 .column.drag-over{border-color:var(--accent);background:var(--accent-dim)}
 .column-header{padding:12px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px}
@@ -114,7 +128,6 @@ a{color:var(--accent);text-decoration:none}
 .pill-points{background:var(--surface2);color:var(--text2);font-family:var(--mono)}
 .pill-epic{color:#fff;font-size:10px;font-weight:600}
 .badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;text-transform:capitalize}
-/* Fallback badge styles — overridden by dynamic styles once config loads */
 .badge-backlog{background:var(--surface2);color:var(--text2)}
 .badge-todo{background:var(--accent-dim);color:var(--accent)}
 .badge-in-progress{background:var(--warning-dim);color:var(--warning)}
@@ -139,32 +152,42 @@ a{color:var(--accent);text-decoration:none}
 th.sorted .sort-arrow{opacity:1;color:var(--accent)}
 .ftable td{padding:8px 12px;border-bottom:1px solid var(--border)}
 .ftable tr:hover td{background:var(--surface)}
-.ftable tr.expanded td{background:var(--surface);border-bottom-color:transparent}
 .td-id{font-family:var(--mono);font-size:12px;color:var(--text2);white-space:nowrap}
 .td-title{cursor:pointer;font-weight:500}
 .td-title:hover{color:var(--accent)}
-.detail-row td{background:var(--surface)!important;padding:16px 24px}
-.detail-content{font-size:13px;line-height:1.6}
-.detail-content h4{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);margin-bottom:8px}
-.detail-content ul{padding-left:20px;margin-top:4px}
-.detail-content li{margin-bottom:4px;color:var(--text2)}
 .clickable-row{cursor:pointer}
 .clickable-row:hover td{background:var(--accent-dim)!important}
 
-/* ── Milestones View ─────────────────────────────────────── */
-.ms-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px;cursor:pointer;transition:border-color .15s}
-.ms-card:hover{border-color:var(--border2)}
-.ms-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
-.ms-header h2{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
-.ms-deadline{font-size:12px;color:var(--text2);font-family:var(--mono);margin-left:auto}
-.ms-progress{margin-bottom:16px}
-.ms-epics{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
-.ms-epic{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;cursor:pointer;transition:border-color .15s}
-.ms-epic:hover{border-color:var(--border2)}
-.epic-name{font-weight:600;font-size:13px;margin-bottom:6px;display:flex;align-items:center;gap:6px}
-.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
-.epic-counts{font-size:11px;color:var(--text2);margin-bottom:6px}
-.epic-meta{display:flex;align-items:center;gap:6px;margin-top:8px}
+/* ── Cards View (new) ───────────────────────────────────── */
+.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
+.entity-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;transition:border-color .15s}
+.entity-card:hover{border-color:var(--border2)}
+.entity-card-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
+.entity-card-id{font-family:var(--mono);font-size:11px;color:var(--text3)}
+.entity-card-title{font-size:15px;font-weight:600;margin-bottom:10px;line-height:1.4}
+.entity-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
+.entity-card-progress{margin-top:8px}
+.entity-card-children{margin-top:12px;border-top:1px solid var(--border);padding-top:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
+.child-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;cursor:pointer;transition:border-color .15s}
+.child-card:hover{border-color:var(--border2)}
+.child-card-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}
+.child-card-title{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+/* ── List View (new) ────────────────────────────────────── */
+.entity-list{display:flex;flex-direction:column;gap:2px}
+.entity-list-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0;cursor:pointer;transition:border-color .15s}
+.entity-list-item:hover{border-color:var(--border2)}
+.list-item-main{display:flex;align-items:center;gap:10px;padding:12px 16px}
+.list-item-status{flex-shrink:0}
+.list-item-title{font-size:14px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.list-item-fields{display:flex;gap:6px;align-items:center;flex-shrink:0}
+.list-item-progress{display:flex;align-items:center;gap:6px}
+.list-expand-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:10px;padding:2px 4px;border-radius:var(--radius-sm);width:20px;flex-shrink:0}
+.list-expand-btn:hover{color:var(--text);background:var(--surface2)}
+.list-children{padding:4px 16px 12px 46px;display:flex;flex-direction:column;gap:4px}
+.child-list-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:13px;transition:border-color .15s}
+.child-list-item:hover{border-color:var(--border2)}
+.child-list-title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
 
 /* ── Metrics View ────────────────────────────────────────── */
 .metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
@@ -179,21 +202,17 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
 /* ── 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: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{top: 1rem;right: 1rem;height: calc(100vh - 2rem);border-radius: var(--radius);position:fixed;width:600px;max-width:92vw;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: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 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}
@@ -204,31 +223,20 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
 .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-longtext{width:100%}
+.prop-longtext-preview{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:background .15s;min-height:28px}
+.prop-longtext-preview:hover{background:var(--surface2)}
+.prop-longtext-text{flex:1;font-size:13px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.prop-longtext-toggle{font-size:9px;color:var(--text3);flex-shrink:0;transition:transform .15s}
+.prop-longtext-editor{width:100%;min-height:80px;resize:vertical;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:8px;border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;line-height:1.5;outline:none;margin-top:4px;transition:border-color .2s}
+.prop-longtext-editor:focus{border-color:var(--accent)}
+.prop-longtext-editor:disabled{opacity:.6;cursor:default}
+.prop-icon{flex-shrink:0}
 .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)}
@@ -254,30 +262,13 @@ 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) ──────── */
+/* ── Workspace: Source Icon ──────────────────────────────── */
 .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}
@@ -313,25 +304,21 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
 .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}
@@ -359,12 +346,10 @@ 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}
@@ -373,8 +358,6 @@ h4.ce-header{font-size:15px;line-height:1.4}
 .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) ────────────────────────── */
@@ -450,6 +433,35 @@ h4.ce-header{font-size:15px;line-height:1.4}
 .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}
+.history-open-row{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--border)}
+.history-path-input{flex:1;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px;font-family:var(--font);outline:none;transition:border-color .2s}
+.history-path-input:focus{border-color:var(--accent)}
+.history-path-input::placeholder{color:var(--text3)}
+
+/* ── Add Source Modal ───────────────────────────────────── */
+.rail-add{background:transparent;color:var(--text3);border:2px dashed var(--border2);font-size:20px;font-weight:400}
+.rail-add:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim);border-style:solid}
+.addsource-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;opacity:0;pointer-events:none;transition:opacity .2s}
+.addsource-overlay.open{opacity:1;pointer-events:auto}
+.addsource-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);width:520px;max-width:92vw;max-height:85vh;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)}
+.addsource-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
+.addsource-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
+.addsource-header h2{font-size:16px;font-weight:700}
+.addsource-body{flex:1;overflow-y:auto;padding:20px}
+.addsource-type-toggle{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:3px;margin-bottom:20px}
+.addsource-type-btn{flex:1;padding:8px;border:none;background:transparent;color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;border-radius:6px;font-family:var(--font);transition:all .15s}
+.addsource-type-btn.active{background:var(--accent);color:#fff}
+.addsource-field{margin-bottom:16px}
+.addsource-field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);font-weight:600;margin-bottom:6px}
+.addsource-field input{width:100%;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px;font-family:var(--font);outline:none;transition:border-color .2s}
+.addsource-field input:focus{border-color:var(--accent)}
+.addsource-colors{display:flex;gap:8px;flex-wrap:wrap}
+.addsource-color{width:28px;height:28px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .15s;flex-shrink:0}
+.addsource-color:hover{transform:scale(1.15)}
+.addsource-color.active{border-color:var(--text);transform:scale(1.15)}
+.addsource-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}
+.addsource-error{color:var(--danger);font-size:12px;margin-bottom:12px;display:none}
+.addsource-error.visible{display:block}
 
 /* ── Responsive ──────────────────────────────────────────── */
 @media(max-width:1024px){
@@ -463,19 +475,21 @@ h4.ce-header{font-size:15px;line-height:1.4}
   .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}
+  .cards-grid{grid-template-columns:1fr}
 }
 @media(max-width:768px){
   #h-stats{flex-wrap:wrap;gap:12px}
   .header{gap:12px}
   .metrics-grid{grid-template-columns:1fr}
+  .cards-grid{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>
@@ -483,7 +497,7 @@ h4.ce-header{font-size:15px;line-height:1.4}
 </head>
 <body>
 <div class="app">
-  <!-- Source Rail (Discord/Slack style) -->
+  <!-- Source Rail -->
   <nav class="source-rail" id="source-rail"></nav>
 
   <!-- Sidebar -->
@@ -492,78 +506,16 @@ h4.ce-header{font-size:15px;line-height:1.4}
       <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>
-        <span>Board</span>
-      </a>
-      <a href="#table" data-view="table">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
-        <span>Table</span>
-      </a>
-      <a href="#milestones" data-view="milestones">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
-        <span>Milestones</span>
-      </a>
-      <a href="#metrics" data-view="metrics">
-        <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>
+    <nav id="sidebar-nav"></nav>
     <div class="sidebar-footer">mdboard</div>
   </aside>
 
   <div class="main">
     <!-- Header -->
-    <header class="header">
-      <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>
-        <div class="progress progress-accent"><div class="progress-fill" id="h-milestone-progress" style="width:0%"></div></div>
-      </div>
-      <div class="header-section" id="h-sprint-wrap" style="display:none">
-        <span class="header-section-label">Sprint</span>
-        <span class="header-section-value" id="h-sprint-name"></span>
-        <span style="font-size:11px;color:var(--text2)" id="h-sprint-days"></span>
-      </div>
-      <div id="h-stats"></div>
-    </header>
+    <header class="header" id="app-header"></header>
 
     <!-- Content -->
-    <div class="content">
-      <div id="view-board" class="view active">
-        <div id="sprint-bar" style="display:none"></div>
-        <div id="board-filters" class="filter-bar"></div>
-        <div id="board"></div>
-      </div>
-      <div id="view-table" class="view">
-        <div id="table-controls" class="filter-bar"></div>
-        <div id="table-wrapper"></div>
-      </div>
-      <div id="view-milestones" class="view">
-        <div id="ms-filters" class="filter-bar"></div>
-        <div id="milestones-container"></div>
-      </div>
-      <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 class="content" id="app-content"></div>
   </div>
 </div>
 
@@ -599,6 +551,10 @@ h4.ce-header{font-size:15px;line-height:1.4}
 <div id="history-overlay" class="history-overlay"></div>
 <div id="history-modal" class="history-modal"></div>
 
+<!-- Add Source Modal -->
+<div id="addsource-overlay" class="addsource-overlay"></div>
+<div id="addsource-modal" class="addsource-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>
@@ -881,21 +837,110 @@ var ICON_SHAPES = {
   'three-quarter-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/><path d="M8 2A6 6 0 1 1 2 8L8 8Z" fill="' + c + '"/></svg>'; },
   'check-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="' + c + '"/><path d="M5 8.5L7 10.5L11 5.5" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'; },
   'x-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/><path d="M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5" stroke="' + c + '" stroke-width="1.5" stroke-linecap="round"/></svg>'; },
-  'slash-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/><path d="M4.5 11.5L11.5 4.5" stroke="' + c + '" stroke-width="1.5" stroke-linecap="round"/></svg>'; }
+  'slash-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/><path d="M4.5 11.5L11.5 4.5" stroke="' + c + '" stroke-width="1.5" stroke-linecap="round"/></svg>'; },
+  'pause-circle': function(c) { return '<svg class="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="' + c + '" stroke-width="1.5"/><path d="M6.5 5.5v5M9.5 5.5v5" stroke="' + c + '" stroke-width="1.5" stroke-linecap="round"/></svg>'; }
+};
+
+/* Sidebar tab icons */
+var TAB_ICONS = {
+  'check-square': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 12l2 2 4-4"/></svg>',
+  'target': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></svg>',
+  'refresh-cw': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>',
+  'lightbulb': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18h6M10 22h4"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A7 7 0 1 0 7.5 11.5c.76.76 1.23 1.52 1.41 2.5"/></svg>',
+  'file-text': '<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>',
+  'bar-chart': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>',
+  'board': '<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>',
+  'table': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>',
+  'overview': '<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>'
+};
+
+/* ══════════════════════════════════════════════════════════════
+   DATA STORE — fully dynamic, config-driven
+   ══════════════════════════════════════════════════════════════ */
+var D = {
+  config: null,
+  project: null,
+  entities: {},
+  metrics: null,
+  health: null,
+  loaded: false,
+  sources: [],
+  activeSource: null,
+  theme: null,
+  activeTab: null,
+  activeLayouts: {},
+  tabFilters: {},
+  tabSort: {},
 };
 
-/* Config-driven maps — populated by initFromConfig() */
-var STATUS_ICON_MAP = {};
-var STATUS_COLOR_MAP = {};
-var ENTITY_NAMES = {};
+/* ── Helpers ─────────────────────────────────────────────── */
+function escHtml(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+
+function hashColor(name) {
+  var colors = ['#5B6EF5','#8B5CF6','#EC4899','#F59E0B','#10B981','#06B6D4','#F97316','#6366F1'];
+  var hash = 0;
+  for (var i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  return colors[Math.abs(hash) % colors.length];
+}
+
+function badgeClass(prefix, value) {
+  if (!value) return prefix + '-backlog';
+  return prefix + '-' + value.toLowerCase().replace(/\s+/g, '-');
+}
+
+function fmtDate(d) { return d ? String(d).substring(0, 10) : ''; }
+
+/* ── Toast ───────────────────────────────────────────────── */
+function showToast(msg, type) {
+  var el = document.createElement('div');
+  el.className = 'toast toast-' + (type || 'success');
+  el.textContent = msg;
+  document.body.appendChild(el);
+  setTimeout(function() { el.remove(); }, 3000);
+}
+
+/* ── Status & Priority Icons ──────────────────────────────── */
+function statusIcon(entityType, statusKey) {
+  if (!D.config || !D.config.entities) return ICON_SHAPES['dashed-circle']('#5A5A63');
+  var entity = D.config.entities[entityType];
+  if (!entity || !entity.fields) return ICON_SHAPES['dashed-circle']('#5A5A63');
+
+  // Try status field first, then check all enum fields
+  var fields = entity.fields;
+  for (var fname in fields) {
+    var f = fields[fname];
+    if (f.type === 'enum' && f.values) {
+      for (var i = 0; i < f.values.length; i++) {
+        if (f.values[i].key === statusKey) {
+          var v = f.values[i];
+          var fn = ICON_SHAPES[v.icon || 'dashed-circle'];
+          return fn ? fn(v.color || '#5A5A63') : ICON_SHAPES['dashed-circle'](v.color || '#5A5A63');
+        }
+      }
+    }
+  }
+  return ICON_SHAPES['dashed-circle']('#5A5A63');
+}
 
-function statusIcon(status) {
-  var entry = STATUS_ICON_MAP[status];
-  if (entry) {
-    var fn = ICON_SHAPES[entry.icon];
-    if (fn) return fn(entry.color);
+function statusIconByKey(statusKey) {
+  if (!D.config || !D.config.entities) return ICON_SHAPES['dashed-circle']('#5A5A63');
+  for (var type in D.config.entities) {
+    var entity = D.config.entities[type];
+    if (entity.fields) {
+      for (var fname in entity.fields) {
+        var f = entity.fields[fname];
+        if (f.type === 'enum' && f.values) {
+          for (var i = 0; i < f.values.length; i++) {
+            if (f.values[i].key === statusKey) {
+              var v = f.values[i];
+              var fn = ICON_SHAPES[v.icon || 'dashed-circle'];
+              return fn ? fn(v.color || '#5A5A63') : ICON_SHAPES['dashed-circle'](v.color || '#5A5A63');
+            }
+          }
+        }
+      }
+    }
   }
-  // Fallback: dashed circle
   return ICON_SHAPES['dashed-circle']('#5A5A63');
 }
 
@@ -904,13 +949,6 @@ function priorityIcon(priority) {
   if (D.config && D.config.priorities) {
     var entry = D.config.priorities.find(function(p) { return p.key === priority; });
     if (entry) { c = entry.color; n = entry.bars; }
-  } else {
-    switch (priority) {
-      case 'urgent': c = '#F97316'; n = 4; break;
-      case 'high': c = '#F97316'; n = 3; break;
-      case 'medium': c = '#D4A72C'; n = 2; break;
-      case 'low': c = '#5B6EF5'; n = 1; break;
-    }
   }
   var bars = '';
   for (var i = 0; i < 4; i++) {
@@ -922,74 +960,280 @@ function priorityIcon(priority) {
   return '<svg class="icon" viewBox="0 0 16 16">' + bars + '</svg>';
 }
 
-function milestoneIcon(status) {
-  var msStatuses = D.config && D.config.statuses ? D.config.statuses.milestone : null;
-  var entry = msStatuses ? msStatuses.find(function(s) { return s.key === status; }) : null;
-  var c = entry ? entry.color : '#8B8B93';
+/* ── Config-driven entity helpers ─────────────────────────── */
+function getEntityDef(type) {
+  return D.config && D.config.entities ? D.config.entities[type] || null : null;
+}
 
-  switch (status) {
-    case 'active':
-      return '<svg class="icon" viewBox="0 0 16 16"><path d="M8 1L15 8L8 15L1 8Z" fill="none" stroke="' + c + '" stroke-width="1.5"/><path d="M8 5L11 8L8 11L5 8Z" fill="' + c + '"/></svg>';
-    case 'completed':
-      return '<svg class="icon" viewBox="0 0 16 16"><path d="M8 1L15 8L8 15L1 8Z" fill="' + c + '"/><path d="M5.5 8L7 9.5L10.5 6" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-    default:
-      return '<svg class="icon" viewBox="0 0 16 16"><path d="M8 1L15 8L8 15L1 8Z" fill="none" stroke="' + c + '" stroke-width="1.5"/></svg>';
+function getEntityFields(type) {
+  var def = getEntityDef(type);
+  return def ? def.fields || {} : {};
+}
+
+function getEntityStatuses(type) {
+  var fields = getEntityFields(type);
+  return fields.status && fields.status.type === 'enum' ? fields.status.values : null;
+}
+
+function getEntities(type) {
+  return D.entities[type] || [];
+}
+
+function getEntityPlural(type) {
+  var def = getEntityDef(type);
+  return def ? def.plural.toLowerCase() : type + 's';
+}
+
+function getEntitySingular(type) {
+  var def = getEntityDef(type);
+  return def ? def.singular : type;
+}
+
+function getTabConfig(tabId) {
+  if (!D.config || !D.config.ui || !D.config.ui.tabs) return null;
+  return D.config.ui.tabs.find(function(t) { return t.id === tabId; }) || null;
+}
+
+function getActiveLayout(tabId) {
+  if (D.activeLayouts[tabId]) return D.activeLayouts[tabId];
+  var tab = getTabConfig(tabId);
+  return tab ? tab.defaultLayout : 'board';
+}
+
+/* ── Filtering helpers ───────────────────────────────────── */
+function getAutoFilters(entityType) {
+  if (!D.config || !D.config.entities) return [];
+  var def = getEntityDef(entityType);
+  if (!def || !def.fields) return [];
+  var filters = [];
+  for (var name in def.fields) {
+    var f = def.fields[name];
+    if (f.type === 'enum') filters.push(name);
   }
+  // Add ancestor types as filters
+  var ancestors = findAncestors(entityType);
+  for (var i = 0; i < ancestors.length; i++) {
+    filters.push(ancestors[i]);
+  }
+  return filters;
 }
 
-/* ══════════════════════════════════════════════════════════════
-   DATA STORE
-   ══════════════════════════════════════════════════════════════ */
-var D = {
-  config: null, project: null, milestones: [], epics: [], tasks: [],
-  sprints: [], allSprints: [], metrics: null, health: null, loaded: false,
-  sources: [], activeSource: null, overviewLinks: null, notes: [],
-  aiSuggestions: null, theme: null
-};
+function getFilterValues(entityType, field) {
+  var items = getEntities(entityType);
+  var def = getEntityDef(entityType);
+  var fieldDef = def && def.fields ? def.fields[field] : null;
 
-/* ── Helpers ─────────────────────────────────────────────── */
-function escHtml(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+  // Enum field — return all possible values
+  if (fieldDef && fieldDef.type === 'enum' && fieldDef.values) {
+    return fieldDef.values.map(function(v) { return v.key; });
+  }
 
-function epicColor(name) {
-  var colors = ['#5B6EF5','#8B5CF6','#EC4899','#F59E0B','#10B981','#06B6D4','#F97316','#6366F1'];
-  var hash = 0;
-  for (var i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
-  return colors[Math.abs(hash) % colors.length];
+  // Ancestor ref — collect unique values from items
+  var vals = [];
+  items.forEach(function(item) {
+    var v = item['_' + field] || item[field];
+    if (v && vals.indexOf(v) === -1) vals.push(v);
+  });
+  return vals;
 }
 
-function badgeClass(prefix, value) {
-  if (!value) return prefix + '-backlog';
-  return prefix + '-' + value.toLowerCase().replace(/\s+/g, '-');
+function getFieldLabel(entityType, fieldName, value) {
+  var def = getEntityDef(entityType);
+  if (!def || !def.fields) return value || '';
+  var field = def.fields[fieldName];
+  if (field && field.type === 'enum' && field.values) {
+    var match = field.values.find(function(v) { return v.key === value; });
+    if (match) return match.label;
+  }
+  // Ancestor label
+  if (!field) {
+    var ancDef = getEntityDef(fieldName);
+    if (ancDef) return value || '';
+  }
+  return value || '';
 }
 
-function fmtDate(d) { return d ? String(d).substring(0, 10) : ''; }
+function getFieldColor(entityType, fieldName, value) {
+  var def = getEntityDef(entityType);
+  if (!def || !def.fields) return null;
+  var field = def.fields[fieldName];
+  if (field && field.type === 'enum' && field.values) {
+    var match = field.values.find(function(v) { return v.key === value; });
+    if (match) return match.color || null;
+  }
+  return null;
+}
+
+function getFilteredItems(tabConfig) {
+  if (!tabConfig || !tabConfig.entity) return [];
+  var type = tabConfig.entity;
+  var items = getEntities(type).slice();
+  var tabId = tabConfig.id;
+  var filters = D.tabFilters[tabId] || {};
+
+  // Apply search filter
+  if (filters._search) {
+    var q = filters._search.toLowerCase();
+    items = items.filter(function(x) {
+      return (x.id || '').toLowerCase().indexOf(q) !== -1 ||
+             (x.title || '').toLowerCase().indexOf(q) !== -1;
+    });
+  }
+
+  // Apply field filters
+  for (var field in filters) {
+    if (field === '_search') continue;
+    var val = filters[field];
+    if (!val) continue;
+    items = items.filter(function(x) {
+      return x[field] === val || x['_' + field] === val;
+    });
+  }
 
-function daysRemaining(endDate) {
-  if (!endDate) return null;
-  var end = new Date(endDate); var now = new Date();
-  return Math.ceil((end - now) / 86400000);
+  // Apply sort
+  var sort = D.tabSort[tabId];
+  if (sort && sort.col) {
+    var col = sort.col, dir = sort.asc ? 1 : -1;
+    items.sort(function(a, b) {
+      var va = a[col] == null ? '' : a[col], vb = b[col] == null ? '' : b[col];
+      if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir;
+      return String(va).localeCompare(String(vb)) * dir;
+    });
+  }
+
+  return items;
 }
 
-var STATUSES = ['backlog','todo','in-progress','in-review','done','blocked','cancelled'];
-var PRIORITIES = ['urgent','high','medium','low'];
-var STATUS_LABELS = {backlog:'Backlog',todo:'Todo','in-progress':'In Progress','in-review':'In Review',done:'Done',blocked:'Blocked',cancelled:'Cancelled'};
-var PRIORITY_LABELS = {urgent:'Urgent',high:'High',medium:'Medium',low:'Low'};
-var BOARD_COLS = ['backlog','todo','in-progress','in-review','done'];
-var COMPLETED_STATUS = 'done';
+/* ── Hierarchy helpers ───────────────────────────────────── */
+function findAncestors(type) {
+  if (!D.config || !D.config.hierarchy) return [];
+  var ancestors = [];
+  function walk(node, target, path) {
+    for (var t in node) {
+      if (t === target) { return path.slice(); }
+      if (node[t].children) {
+        var result = walk(node[t].children, target, path.concat(t));
+        if (result) return result;
+      }
+    }
+    return null;
+  }
+  return walk(D.config.hierarchy, type, []) || [];
+}
 
-/* ── Toast ───────────────────────────────────────────────── */
-function showToast(msg, type) {
-  var el = document.createElement('div');
-  el.className = 'toast toast-' + (type || 'success');
-  el.textContent = msg;
-  document.body.appendChild(el);
-  setTimeout(function() { el.remove(); }, 3000);
+function findChildren(type) {
+  if (!D.config || !D.config.hierarchy) return [];
+  function walk(node) {
+    for (var t in node) {
+      if (t === type && node[t].children) {
+        return Object.keys(node[t].children);
+      }
+      if (node[t].children) {
+        var result = walk(node[t].children);
+        if (result) return result;
+      }
+    }
+    return [];
+  }
+  return walk(D.config.hierarchy);
+}
+
+function isCompletedStatus(status) {
+  if (!D.config || !D.config.completedStatuses) return status === 'done';
+  return D.config.completedStatuses.indexOf(status) !== -1;
+}
+
+function isStandaloneType(type) {
+  return D.config && D.config.standalone && !!D.config.standalone[type];
+}
+
+/* ── Rendering helpers ───────────────────────────────────── */
+function renderFieldPill(item, entityType, field) {
+  var value = item[field];
+  if (value == null || value === '') return '';
+  var def = getEntityDef(entityType);
+  var fieldDef = def && def.fields ? def.fields[field] : null;
+
+  if (fieldDef && fieldDef.type === 'enum' && fieldDef.values) {
+    var match = fieldDef.values.find(function(v) { return v.key === value; });
+    if (match) {
+      var color = match.color || 'var(--text2)';
+      return '<span class="pill" style="background:' + color + '20;color:' + color + '">' +
+        (match.icon ? statusIcon(entityType, value) + ' ' : '') +
+        escHtml(match.label) + '</span>';
+    }
+  }
+
+  if (fieldDef && fieldDef.type === 'longtext') {
+    var ltText = String(value);
+    var ltTrunc = ltText.length > 50 ? ltText.substring(0, 50) + '...' : ltText;
+    return '<span class="pill" style="background:var(--surface2);color:var(--text2)">' + escHtml(ltTrunc) + '</span>';
+  }
+
+  if (fieldDef && fieldDef.type === 'number' && value != null) {
+    return '<span class="pill pill-points">' + value + (fieldDef.label === 'Points' ? ' pts' : '') + '</span>';
+  }
+
+  if (fieldDef && fieldDef.type === 'list') {
+    var arr = Array.isArray(value) ? value : String(value).split(',').map(function(s) { return s.trim(); });
+    return arr.filter(Boolean).map(function(v) {
+      return '<span class="pill" style="background:var(--surface2);color:var(--text2)">' + escHtml(v) + '</span>';
+    }).join('');
+  }
+
+  return '<span class="pill" style="background:var(--surface2);color:var(--text2)">' + escHtml(String(value)) + '</span>';
+}
+
+function renderFieldCell(item, entityType, col) {
+  if (col === 'id') return '<span class="td-id">' + escHtml(item.id || '') + '</span>';
+  if (col === 'title') return '<span class="td-title">' + escHtml(item.title || '') + '</span>';
+
+  var value = item[col] || item['_' + col];
+  if (value == null || value === '') return '';
+
+  var def = getEntityDef(entityType);
+  var fieldDef = def && def.fields ? def.fields[col] : null;
+
+  if (fieldDef && fieldDef.type === 'enum') {
+    return '<span class="badge ' + badgeClass('badge', value) + '">' +
+      statusIcon(entityType, value) + ' ' + escHtml(getFieldLabel(entityType, col, value)) + '</span>';
+  }
+
+  if (fieldDef && fieldDef.type === 'longtext') {
+    var ltText = String(value);
+    var ltTrunc = ltText.length > 50 ? ltText.substring(0, 50) + '...' : ltText;
+    return '<span style="color:var(--text2)">' + escHtml(ltTrunc) + '</span>';
+  }
+
+  if (fieldDef && fieldDef.type === 'list') {
+    var arr = Array.isArray(value) ? value : [value];
+    return escHtml(arr.join(', '));
+  }
+
+  // Ancestor ref column
+  if (!fieldDef && value) {
+    return escHtml(String(value));
+  }
+
+  return escHtml(String(value));
+}
+
+function emptyState(entityType) {
+  var singular = getEntitySingular(entityType);
+  return '<div class="empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">' +
+    '<rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 12h6M12 9v6"/></svg>' +
+    '<p>No ' + escHtml(singular.toLowerCase()) + 's yet.</p></div>';
 }
 
 /* ── Data Fetching ───────────────────────────────────────── */
+function apiBase() {
+  if (D.activeSource) return '/api/sources/' + encodeURIComponent(D.activeSource);
+  return '/api';
+}
+
 async function fetchJson(url) {
   try { var r = await fetch(url); return r.ok ? await r.json() : null; }
-  catch { return null; }
+  catch(e) { return null; }
 }
 
 async function patchItem(type, id, updates) {
@@ -1014,12 +1258,6 @@ 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;
@@ -1062,28 +1300,41 @@ async function deleteItem(collection, id) {
 
 /* ── Data Loading ────────────────────────────────────────── */
 async function loadAll() {
+  D.config = await fetchJson('/api/config');
+  if (!D.config) return;
   var base = apiBase();
-  var results = await Promise.all([
-    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]]; 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] || [];
+  var types = D.config.entities ? Object.keys(D.config.entities) : [];
+
+  var fetches = types.map(function(t) {
+    var def = D.config.entities[t];
+    return fetchJson(base + '/' + def.plural.toLowerCase());
+  });
+  fetches.push(fetchJson('/api/project'));
+  fetches.push(fetchJson('/api/metrics'));
+  fetches.push(fetchJson('/api/health'));
+  fetches.push(fetchJson('/api/sources'));
+
+  var results = await Promise.all(fetches);
+
+  types.forEach(function(t, i) {
+    D.entities[t] = results[i] || [];
+  });
+  var offset = types.length;
+  D.project = results[offset] || {};
+  D.metrics = results[offset + 1];
+  D.health = results[offset + 2];
+  D.sources = results[offset + 3] || [];
   D.loaded = true;
+
+  // Apply the project's theme + reload custom CSS
+  applyTheme(getActiveTheme());
+  reloadCustomCss();
 }
 
 function refreshData() {
   loadAll().then(function() {
-    initFromConfig();
-    renderAll();
+    generateDynamicStyles();
+    renderCurrentView();
     if (hasWorkspace()) buildSourceRail();
   });
 }
@@ -1092,72 +1343,30 @@ function hasWorkspace() {
   return D.config && D.config.workspace && D.config.workspace.sources && D.config.workspace.sources.length > 0;
 }
 
-/* ── Config-driven initialization ────────────────────────── */
-function initFromConfig() {
-  if (!D.config) return;
-
-  var cfg = D.config;
-
-  // Derive entity names
-  ENTITY_NAMES = cfg.entities || {};
-
-  // Derive statuses, labels, board columns
-  if (cfg.statuses && cfg.statuses.task) {
-    STATUSES = cfg.statuses.task.map(function(s) { return s.key; });
-    STATUS_LABELS = {};
-    cfg.statuses.task.forEach(function(s) { STATUS_LABELS[s.key] = s.label; });
-  }
-
-  // Build icon/color maps for all status types
-  STATUS_ICON_MAP = {};
-  STATUS_COLOR_MAP = {};
-  if (cfg.statuses) {
-    Object.keys(cfg.statuses).forEach(function(entityType) {
-      cfg.statuses[entityType].forEach(function(s) {
-        if (!STATUS_ICON_MAP[s.key]) {
-          STATUS_ICON_MAP[s.key] = { icon: s.icon || 'dashed-circle', color: s.color || '#5A5A63' };
-          STATUS_COLOR_MAP[s.key] = s.color || '#5A5A63';
-        }
-      });
-    });
-  }
-
-  // Derive priorities
-  if (cfg.priorities) {
-    PRIORITIES = cfg.priorities.map(function(p) { return p.key; });
-    PRIORITY_LABELS = {};
-    cfg.priorities.forEach(function(p) { PRIORITY_LABELS[p.key] = p.label; });
-  }
-
-  // Board columns
-  if (cfg.boardColumns) BOARD_COLS = cfg.boardColumns;
-
-  // Completed status
-  if (cfg.completedStatus) COMPLETED_STATUS = cfg.completedStatus;
-
-  generateDynamicStyles();
+function 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;
 }
 
+/* ── Config-driven initialization ────────────────────────── */
 function generateDynamicStyles() {
+  if (!D.config || !D.config.entities) return;
   var css = '';
-  if (D.config && D.config.statuses && D.config.statuses.task) {
-    D.config.statuses.task.forEach(function(s) {
-      var key = s.key;
-      var color = s.color;
-      css += '.badge-' + key + '{background:' + color + '20;color:' + color + '}\n';
-      css += '.card[data-status="' + key + '"]{border-left-color:' + color + '}\n';
-    });
-  }
-  // Milestone/epic/sprint statuses
-  ['milestone', 'epic', 'sprint'].forEach(function(entityType) {
-    if (D.config && D.config.statuses && D.config.statuses[entityType]) {
-      D.config.statuses[entityType].forEach(function(s) {
-        css += '.badge-' + s.key + '{background:' + s.color + '20;color:' + s.color + '}\n';
-      });
+  for (var type in D.config.entities) {
+    var entity = D.config.entities[type];
+    if (!entity.fields) continue;
+    for (var fname in entity.fields) {
+      var field = entity.fields[fname];
+      if (field.type === 'enum' && field.values) {
+        field.values.forEach(function(v) {
+          css += '.badge-' + v.key + '{background:' + v.color + '20;color:' + v.color + '}\n';
+          css += '.card[data-status="' + v.key + '"]{border-left-color:' + v.color + '}\n';
+        });
+      }
     }
-  });
-  // Priority badges
-  if (D.config && D.config.priorities) {
+  }
+  if (D.config.priorities) {
     D.config.priorities.forEach(function(p) {
       css += '.badge-' + p.key + '{background:' + p.color + '20;color:' + p.color + '}\n';
     });
@@ -1166,13 +1375,11 @@ function generateDynamicStyles() {
   if (styleEl) styleEl.textContent = css;
 }
 
-/* ══════════════════════════════════════════════════════════════
-   THEME ENGINE
-   ══════════════════════════════════════════════════════════════ */
+/* ── Theme Engine ────────────────────────────────────────── */
 function generateThemeCss(themeId) {
   var theme = THEMES[themeId];
   if (!theme) return '';
-  var css = '/* mdboard theme: ' + theme.name + ' */\n:root {\n';
+  var css = ':root {\n';
   for (var key in theme.vars) {
     if (theme.vars.hasOwnProperty(key)) {
       css += '  --' + key + ': ' + theme.vars[key] + ';\n';
@@ -1203,206 +1410,42 @@ function getActiveTheme() {
   return D.config && D.config.theme ? D.config.theme : 'default-dark';
 }
 
+
 /* ══════════════════════════════════════════════════════════════
-   WORKSPACE — Source switching & sidebar
+   EDITOR.JS WRAPPER — md↔blocks conversion + Notion-like UX
    ══════════════════════════════════════════════════════════════ */
-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;
-  }
+/* ── 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;
+}
 
-  logoEl.onclick = function() {
-    if (hasWorkspace()) {
-      switchSource('overview');
-    }
-  };
+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;
 }
 
-function buildSourceRail() {
-  var rail = document.getElementById('source-rail');
-  if (!rail) return;
-  rail.innerHTML = '';
+/* ── Markdown → Editor.js Blocks ────────────────────────── */
+function markdownToBlocks(md) {
+  if (!md || !md.trim()) return [{ type: 'paragraph', data: { text: '' } }];
 
-  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 {
-    var src = new EventSource('/api/events');
-    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();
-      }
-      refreshData();
-    };
-    src.onerror = function() { setTimeout(connectSSE, 5000); src.close(); };
-  } catch { /* no SSE support */ }
-}
-
-/* ══════════════════════════════════════════════════════════════
-   EDITOR.JS WRAPPER — md↔blocks conversion + Notion-like UX
-   ══════════════════════════════════════════════════════════════ */
-
-/* ── Inline Markdown ↔ HTML ──────────────────────────────── */
-function inlineMdToHtml(text) {
-  if (!text) return '';
-  text = text.replace(/\*\*(.+?)\*\*/g, '<b>$1</b>');
-  text = text.replace(/\*(.+?)\*/g, '<i>$1</i>');
-  text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
-  text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
-  return text;
-}
-
-function inlineHtmlToMd(html) {
-  if (!html) return '';
-  var text = html.replace(/<br\s*\/?>/gi, '\n');
-  text = text.replace(/<a[^>]+href="([^"]*)"[^>]*>([^<]*)<\/a>/gi, '[$2]($1)');
-  text = text.replace(/<b>([^<]*)<\/b>/gi, '**$1**');
-  text = text.replace(/<strong>([^<]*)<\/strong>/gi, '**$1**');
-  text = text.replace(/<i>([^<]*)<\/i>/gi, '*$1*');
-  text = text.replace(/<em>([^<]*)<\/em>/gi, '*$1*');
-  text = text.replace(/<code>([^<]*)<\/code>/gi, '`$1`');
-  text = text.replace(/<mark[^>]*>([^<]*)<\/mark>/gi, '==$1==');
-  text = text.replace(/<[^>]+>/g, '');
-  return text;
-}
-
-/* ── Markdown → Editor.js Blocks ────────────────────────── */
-function markdownToBlocks(md) {
-  if (!md || !md.trim()) return [{ type: 'paragraph', data: { text: '' } }];
-
-  var lines = md.split('\n');
-  var blocks = [];
-  var i = 0;
+  var lines = md.split('\n');
+  var blocks = [];
+  var i = 0;
 
   while (i < lines.length) {
     var line = lines[i];
@@ -1689,118 +1732,111 @@ function simpleMarkdownRender(md) {
 
 
 /* ══════════════════════════════════════════════════════════════
-   BOARD VIEW
+   BOARD VIEW — Generic kanban board from tabConfig
    ══════════════════════════════════════════════════════════════ */
-var boardFilters = { search: '', priority: '', epic: '', milestone: '' };
-
-function renderBoardFilters() {
-  var c = document.getElementById('board-filters');
-  var ep = [], ms = [];
-  D.tasks.forEach(function(f) {
-    if (f.epic && ep.indexOf(f.epic) === -1) ep.push(f.epic);
-    if (f.milestone && ms.indexOf(f.milestone) === -1) ms.push(f.milestone);
-  });
 
-  var epicPlural = ENTITY_NAMES.epic ? ENTITY_NAMES.epic.plural : 'Epics';
-  var msPlural = ENTITY_NAMES.milestone ? ENTITY_NAMES.milestone.plural : 'Milestones';
+function renderBoard(container, tabConfig) {
+  if (!D.loaded || !tabConfig || !tabConfig.entity) {
+    container.innerHTML = '<div class="loading-container">' +
+      '<div class="skeleton skeleton-card"></div>'.repeat(3) + '</div>';
+    return;
+  }
 
-  function opts(arr, key, label) {
-    return '<select data-filter="' + key + '"><option value="">All ' + label + '</option>' +
-      arr.map(function(v) { return '<option value="' + escHtml(v) + '"' + (boardFilters[key] === v ? ' selected' : '') + '>' + escHtml(v) + '</option>'; }).join('') + '</select>';
+  var entityType = tabConfig.entity;
+  var boardConfig = tabConfig.board || {};
+  var groupBy = boardConfig.groupBy || 'status';
+  var cardFields = boardConfig.cardFields || ['id', 'title'];
+  var items = getFilteredItems(tabConfig);
+
+  // Get columns from the groupBy field's enum values
+  var fields = getEntityFields(entityType);
+  var groupField = fields[groupBy];
+  var columns = [];
+  if (groupField && groupField.type === 'enum' && groupField.values) {
+    columns = groupField.values.map(function(v) { return { key: v.key, label: v.label, color: v.color }; });
+  } else {
+    // Fallback: derive columns from data
+    var seen = {};
+    items.forEach(function(item) {
+      var v = item[groupBy] || 'none';
+      if (!seen[v]) { seen[v] = true; columns.push({ key: v, label: v, color: null }); }
+    });
   }
 
-  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>' : '';
+  if (items.length === 0 && getEntities(entityType).length === 0) {
+    container.innerHTML = emptyState(entityType);
+    return;
+  }
 
-  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);
+  var html = '<div id="board-' + tabConfig.id + '" class="board-container">';
+  for (var ci = 0; ci < columns.length; ci++) {
+    var col = columns[ci];
+    var colItems = items.filter(function(item) { return (item[groupBy] || '') === col.key; });
 
-  c.querySelectorAll('input[data-filter]').forEach(function(el) {
-    el.addEventListener('input', function() { boardFilters[el.dataset.filter] = el.value; renderBoard(); });
-  });
-  c.querySelectorAll('select[data-filter]').forEach(function(el) {
-    el.addEventListener('change', function() { boardFilters[el.dataset.filter] = el.value; renderBoard(); });
-  });
+    html += '<div class="column" data-status="' + escHtml(col.key) + '">';
+    html += '<div class="column-header"><span class="col-title">' + statusIcon(entityType, col.key) + ' ' + escHtml(col.label) + '</span><span class="col-count">' + colItems.length + '</span></div>';
+    html += '<div class="column-body">';
 
-  var btn = document.getElementById('board-create-btn');
-  if (btn) btn.addEventListener('click', function() { openCreateDialog('tasks'); });
-}
-
-function getFilteredBoardTasks() {
-  var list = D.tasks.slice();
-  var f = boardFilters;
-  if (f.search) { var q = f.search.toLowerCase(); list = list.filter(function(x) { return (x.id || '').toLowerCase().indexOf(q) !== -1 || (x.title || '').toLowerCase().indexOf(q) !== -1; }); }
-  if (f.priority) list = list.filter(function(x) { return x.priority === f.priority; });
-  if (f.epic) list = list.filter(function(x) { return x.epic === f.epic; });
-  if (f.milestone) list = list.filter(function(x) { return x.milestone === f.milestone; });
-  return list;
-}
-
-function renderBoard() {
-  var sprint = D.sprints.find(function(s) { return s.status === 'active'; });
-  var sbar = document.getElementById('sprint-bar');
-  if (sprint) {
-    var planned = sprint.planned_points || 0;
-    var completed = sprint.completed_points || 0;
-    var pct = planned ? Math.round(completed / planned * 100) : 0;
-    sbar.style.display = '';
-    sbar.innerHTML =
-      '<div class="sprint-goal"><b>' + escHtml(sprint.id || '') + '</b>' + (sprint.goal ? ' &mdash; ' + escHtml(sprint.goal) : '') + '</div>' +
-      '<div style="width:160px"><div class="progress progress-accent"><div class="progress-fill" style="width:' + pct + '%"></div></div>' +
-      '<div style="font-size:11px;color:var(--text3);margin-top:2px;font-family:var(--mono)">' + completed + '/' + planned + ' pts</div></div>' +
-      '<div class="sprint-dates">' + fmtDate(sprint.start_date) + ' &mdash; ' + fmtDate(sprint.end_date) + '</div>';
-  } else { sbar.style.display = 'none'; }
-
-  var board = document.getElementById('board');
-  if (!D.loaded) {
-    board.innerHTML = BOARD_COLS.map(function() {
-      return '<div class="column"><div class="column-header"><div class="skeleton skeleton-line" style="width:80px;height:16px"></div></div><div class="column-body">' +
-        '<div class="skeleton skeleton-card"></div><div class="skeleton skeleton-card"></div></div></div>';
-    }).join('');
-    return;
+    for (var ii = 0; ii < colItems.length; ii++) {
+      html += renderBoardCard(colItems[ii], entityType, cardFields, tabConfig);
+    }
+
+    html += '</div></div>';
   }
+  html += '</div>';
+  container.innerHTML = html;
 
-  var filteredTasks = getFilteredBoardTasks();
-  var taskSingular = ENTITY_NAMES.task ? ENTITY_NAMES.task.singular.toLowerCase() : 'task';
+  // Setup drag-drop and click handlers
+  setupBoardDragDrop(container, entityType, groupBy, tabConfig);
+}
 
-  if (!D.tasks.length) {
-    board.innerHTML = '<div class="empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 12h6M12 9v6"/></svg><p>No ' + escHtml(taskSingular) + 's yet. Create ' + escHtml(taskSingular) + ' files in your project/ directory to get started.</p></div>';
-    return;
+function renderBoardCard(item, entityType, cardFields, tabConfig) {
+  var html = '<div class="card" draggable="true" data-id="' + escHtml(item.id || '') + '" data-status="' + escHtml(item.status || '') + '">';
+
+  // Header: ID + priority
+  html += '<div class="card-header">';
+  if (item.priority) html += '<span class="card-priority">' + priorityIcon(item.priority) + '</span>';
+  html += '<span class="card-id">' + escHtml(item.id || '') + '</span>';
+  html += '</div>';
+
+  // Title
+  html += '<div class="card-title">' + escHtml(item.title || '') + '</div>';
+
+  // Meta fields
+  html += '<div class="card-meta">';
+  for (var i = 0; i < cardFields.length; i++) {
+    var f = cardFields[i];
+    if (f === 'id' || f === 'title' || f === 'status') continue;
+    var val = item[f];
+    if (val == null || val === '') continue;
+
+    if (f === 'assigned') {
+      var arr = Array.isArray(val) ? val : [val];
+      html += '<span class="card-assigned">' + escHtml(arr.join(', ')) + '</span>';
+    } else if (f === 'points' && val != null) {
+      html += '<span class="pill pill-points">' + val + ' pts</span>';
+    } else {
+      html += renderFieldPill(item, entityType, f);
+    }
   }
 
-  board.innerHTML = BOARD_COLS.map(function(status) {
-    var cards = filteredTasks.filter(function(f) { return f.status === status; });
-    return '<div class="column" data-status="' + status + '">' +
-      '<div class="column-header"><span class="col-title">' + statusIcon(status) + ' ' + (STATUS_LABELS[status] || status) + '</span><span class="col-count">' + cards.length + '</span></div>' +
-      '<div class="column-body">' + cards.map(renderCard).join('') + '</div></div>';
-  }).join('');
+  // Show ancestor refs as pills
+  var ancestors = findAncestors(entityType);
+  for (var ai = 0; ai < ancestors.length; ai++) {
+    var ancVal = item['_' + ancestors[ai]];
+    if (ancVal) {
+      html += '<span class="pill" style="background:' + hashColor(ancVal) + ';color:#fff;font-size:10px">' + escHtml(ancVal) + '</span>';
+    }
+  }
 
-  setupDragDrop();
+  html += '</div></div>';
+  return html;
 }
 
-function renderCard(f) {
-  var ec = f.epic ? epicColor(f.epic) : '';
-  var assigned = Array.isArray(f.assigned) ? f.assigned.join(', ') : (f.assigned || '');
-  return '<div class="card" draggable="true" data-id="' + escHtml(f.id || '') + '" data-status="' + escHtml(f.status || '') + '">' +
-    '<div class="card-header">' +
-      '<span class="card-priority">' + priorityIcon(f.priority) + '</span>' +
-      '<span class="card-id">' + escHtml(f.id || '') + '</span>' +
-    '</div>' +
-    '<div class="card-title">' + escHtml(f.title || '') + '</div>' +
-    '<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>';
-}
-
-/* ── Drag & Drop ─────────────────────────────────────────── */
-function setupDragDrop() {
-  document.querySelectorAll('.card[draggable]').forEach(function(card) {
+function setupBoardDragDrop(container, entityType, groupBy, tabConfig) {
+  var plural = getEntityPlural(entityType);
+
+  container.querySelectorAll('.card[draggable]').forEach(function(card) {
     card.addEventListener('dragstart', function(e) {
       e.dataTransfer.setData('text/plain', card.dataset.id);
       e.dataTransfer.effectAllowed = 'move';
@@ -1808,16 +1844,16 @@ function setupDragDrop() {
     });
     card.addEventListener('dragend', function() {
       card.classList.remove('dragging');
-      document.querySelectorAll('.column.drag-over').forEach(function(c) { c.classList.remove('drag-over'); });
+      container.querySelectorAll('.column.drag-over').forEach(function(c) { c.classList.remove('drag-over'); });
     });
     card.addEventListener('click', function(e) {
       if (e.defaultPrevented) return;
-      var task = D.tasks.find(function(f) { return f.id === card.dataset.id; });
-      if (task) openPanel('tasks', task);
+      var item = getEntities(entityType).find(function(i) { return i.id === card.dataset.id; });
+      if (item) openPanel(entityType, item);
     });
   });
 
-  document.querySelectorAll('.column').forEach(function(col) {
+  container.querySelectorAll('.column').forEach(function(col) {
     col.addEventListener('dragover', function(e) {
       e.preventDefault();
       e.dataTransfer.dropEffect = 'move';
@@ -1831,411 +1867,614 @@ function setupDragDrop() {
     col.addEventListener('drop', function(e) {
       e.preventDefault();
       col.classList.remove('drag-over');
-      var taskId = e.dataTransfer.getData('text/plain');
-      var newStatus = col.dataset.status;
-      if (!taskId || !newStatus) return;
-
-      // Optimistic update
-      var task = D.tasks.find(function(f) { return f.id === taskId; });
-      if (task && task.status !== newStatus) {
-        task.status = newStatus;
-        renderBoard();
-        patchItem('tasks', taskId, { status: newStatus });
+      var itemId = e.dataTransfer.getData('text/plain');
+      var newValue = col.dataset.status;
+      if (!itemId || !newValue) return;
+
+      var item = getEntities(entityType).find(function(i) { return i.id === itemId; });
+      if (item && item[groupBy] !== newValue) {
+        item[groupBy] = newValue;
+        renderCurrentView();
+        var updates = {};
+        updates[groupBy] = newValue;
+        patchItem(plural, itemId, updates);
       }
     });
   });
 }
 
+
 /* ══════════════════════════════════════════════════════════════
-   TABLE VIEW
+   TABLE VIEW — Generic sortable table from tabConfig
    ══════════════════════════════════════════════════════════════ */
-var tableSort = { col: 'id', asc: true };
-var tableFilters = { milestone: '', epic: '', status: '', sprint: '', search: '', priority: '' };
-var expandedRow = null;
-var TABLE_COLS = [
-  {key:'id',label:'ID'},{key:'title',label:'Title'},{key:'epic',label:'Epic'},
-  {key:'milestone',label:'Milestone'},{key:'sprint',label:'Sprint'},{key:'status',label:'Status'},
-  {key:'points',label:'Pts'},{key:'priority',label:'Priority'},{key:'assigned',label:'Assigned'}
-];
-
-function renderTableControls() {
-  var c = document.getElementById('table-controls');
-  var ms = [], ep = [], st = [], sp = [];
-  D.tasks.forEach(function(f) {
-    if (f.milestone && ms.indexOf(f.milestone) === -1) ms.push(f.milestone);
-    if (f.epic && ep.indexOf(f.epic) === -1) ep.push(f.epic);
-    if (f.status && st.indexOf(f.status) === -1) st.push(f.status);
-    if (f.sprint && sp.indexOf(f.sprint) === -1) sp.push(f.sprint);
-  });
 
-  var msPlural = ENTITY_NAMES.milestone ? ENTITY_NAMES.milestone.plural : 'Milestones';
-  var epicPlural = ENTITY_NAMES.epic ? ENTITY_NAMES.epic.plural : 'Epics';
-  var sprintPlural = ENTITY_NAMES.sprint ? ENTITY_NAMES.sprint.plural : 'Sprints';
-
-  function opts(arr, filter, label) {
-    return '<select data-tf="' + filter + '"><option value="">All ' + label + '</option>' +
-      arr.map(function(v) { return '<option value="' + escHtml(v) + '"' + (tableFilters[filter] === v ? ' selected' : '') + '>' + escHtml(v) + '</option>'; }).join('') + '</select>';
+function renderTable(container, tabConfig) {
+  if (!D.loaded || !tabConfig || !tabConfig.entity) {
+    container.innerHTML = '<div class="loading-container">' +
+      '<div class="skeleton skeleton-line" style="width:100%;height:32px"></div>'.repeat(6) + '</div>';
+    return;
   }
-  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>';
+  var entityType = tabConfig.entity;
+  var tableConfig = tabConfig.table || {};
+  var columns = tableConfig.columns || ['id', 'title', 'status'];
+  var sortable = tableConfig.sortable !== false;
+  var items = getFilteredItems(tabConfig);
+  var tabId = tabConfig.id;
 
-  c.querySelector('input[data-tf="search"]').addEventListener('input', function(e) { tableFilters.search = e.target.value; renderTableBody(); });
-  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() {
-  var list = D.tasks.slice();
-  var f = tableFilters;
-  if (f.search) { var q = f.search.toLowerCase(); list = list.filter(function(x) { return (x.id || '').toLowerCase().indexOf(q) !== -1 || (x.title || '').toLowerCase().indexOf(q) !== -1; }); }
-  if (f.milestone) list = list.filter(function(x) { return x.milestone === f.milestone; });
-  if (f.epic) list = list.filter(function(x) { return x.epic === f.epic; });
-  if (f.status) list = list.filter(function(x) { return x.status === f.status; });
-  if (f.sprint) list = list.filter(function(x) { return x.sprint === f.sprint; });
-  if (f.priority) list = list.filter(function(x) { return x.priority === f.priority; });
-  var col = tableSort.col, dir = tableSort.asc ? 1 : -1;
-  list.sort(function(a, b) {
-    var va = a[col] == null ? '' : a[col], vb = b[col] == null ? '' : b[col];
-    if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir;
-    return String(va).localeCompare(String(vb)) * dir;
-  });
-  return list;
-}
-
-function renderTableBody() {
-  var w = document.getElementById('table-wrapper');
-  var taskPlural = ENTITY_NAMES.task ? ENTITY_NAMES.task.plural.toLowerCase() : 'tasks';
-  if (!D.loaded) { w.innerHTML = '<div class="loading-container">' + '<div class="skeleton skeleton-line" style="width:100%;height:32px"></div>'.repeat(6) + '</div>'; return; }
-  var tasks = getFilteredTasks();
-  if (!tasks.length) {
-    w.innerHTML = '<div class="empty"><p>' + (D.tasks.length ? 'No ' + escHtml(taskPlural) + ' match filters.' : 'No ' + escHtml(taskPlural) + ' yet.') + '</p></div>';
+  if (items.length === 0) {
+    var allItems = getEntities(entityType);
+    container.innerHTML = '<div class="empty"><p>' +
+      (allItems.length ? 'No items match filters.' : 'No ' + escHtml(getEntitySingular(entityType).toLowerCase()) + 's yet.') +
+      '</p></div>';
     return;
   }
+
+  // Apply table sort
+  var sort = D.tabSort[tabId] || { col: columns[0], asc: true };
+  if (sort.col) {
+    var col = sort.col, dir = sort.asc ? 1 : -1;
+    items.sort(function(a, b) {
+      var va = a[col] != null ? a[col] : (a['_' + col] || '');
+      var vb = b[col] != null ? b[col] : (b['_' + col] || '');
+      if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir;
+      return String(va).localeCompare(String(vb)) * dir;
+    });
+  }
+
   var html = '<table class="ftable"><thead><tr>';
-  TABLE_COLS.forEach(function(c) {
-    var sorted = tableSort.col === c.key;
-    html += '<th class="' + (sorted ? 'sorted' : '') + '" data-col="' + c.key + '">' + c.label + '<span class="sort-arrow">' + (sorted ? (tableSort.asc ? '\u25B2' : '\u25BC') : '') + '</span></th>';
-  });
+  for (var ci = 0; ci < columns.length; ci++) {
+    var c = columns[ci];
+    var sorted = sort.col === c;
+    var label = c;
+    // Get label from field def or entity name for ancestor refs
+    var fieldDef = getEntityFields(entityType)[c];
+    if (fieldDef && fieldDef.label) label = fieldDef.label;
+    else if (c === 'id') label = 'ID';
+    else if (c === 'title') label = 'Title';
+    else {
+      var ancDef = getEntityDef(c);
+      if (ancDef) label = ancDef.singular;
+      else label = c.charAt(0).toUpperCase() + c.slice(1);
+    }
+
+    html += '<th class="' + (sorted ? 'sorted' : '') + '"' + (sortable ? ' data-col="' + c + '"' : '') + '>' +
+      escHtml(label) + '<span class="sort-arrow">' + (sorted ? (sort.asc ? '\u25B2' : '\u25BC') : '') + '</span></th>';
+  }
   html += '</tr></thead><tbody>';
-  tasks.forEach(function(f) {
-    var assigned = Array.isArray(f.assigned) ? f.assigned.join(', ') : (f.assigned || '');
-    html += '<tr class="clickable-row" data-fid="' + escHtml(f.id || '') + '">' +
-      '<td class="td-id">' + escHtml(f.id || '') + '</td>' +
-      '<td class="td-title">' + escHtml(f.title || '') + '</td>' +
-      '<td>' + (f.epic ? '<span class="pill pill-epic" style="background:' + epicColor(f.epic) + '">' + escHtml(f.epic) + '</span>' : '') + '</td>' +
-      '<td>' + escHtml(f.milestone || '') + '</td>' +
-      '<td>' + escHtml(f.sprint || '') + '</td>' +
-      '<td><span class="badge ' + badgeClass('badge', f.status) + '">' + statusIcon(f.status) + ' ' + escHtml(f.status || '') + '</span></td>' +
-      '<td>' + (f.points != null ? f.points : '') + '</td>' +
-      '<td>' + (f.priority ? '<span class="badge ' + badgeClass('badge', f.priority) + '">' + priorityIcon(f.priority) + ' ' + escHtml(f.priority) + '</span>' : '') + '</td>' +
-      '<td>' + escHtml(assigned) + '</td></tr>';
-  });
-  html += '</tbody></table>';
-  w.innerHTML = html;
 
-  w.querySelectorAll('th[data-col]').forEach(function(th) {
-    th.addEventListener('click', function() {
-      if (tableSort.col === th.dataset.col) tableSort.asc = !tableSort.asc;
-      else { tableSort.col = th.dataset.col; tableSort.asc = true; }
-      renderTableBody();
+  for (var ii = 0; ii < items.length; ii++) {
+    var item = items[ii];
+    html += '<tr class="clickable-row" data-fid="' + escHtml(item.id || '') + '">';
+    for (var cj = 0; cj < columns.length; cj++) {
+      html += '<td>' + renderFieldCell(item, entityType, columns[cj]) + '</td>';
+    }
+    html += '</tr>';
+  }
+  html += '</tbody></table>';
+  container.innerHTML = html;
+
+  // Sort handlers
+  if (sortable) {
+    container.querySelectorAll('th[data-col]').forEach(function(th) {
+      th.addEventListener('click', function() {
+        var s = D.tabSort[tabId] || { col: null, asc: true };
+        if (s.col === th.dataset.col) s.asc = !s.asc;
+        else { s.col = th.dataset.col; s.asc = true; }
+        D.tabSort[tabId] = s;
+        renderCurrentView();
+      });
     });
-  });
-  w.querySelectorAll('.clickable-row').forEach(function(tr) {
+  }
+
+  // Row click handlers
+  container.querySelectorAll('.clickable-row').forEach(function(tr) {
     tr.addEventListener('click', function() {
-      var task = D.tasks.find(function(f) { return f.id === tr.dataset.fid; });
-      if (task) openPanel('tasks', task);
+      var item = getEntities(entityType).find(function(i) { return i.id === tr.dataset.fid; });
+      if (item) openPanel(entityType, item);
     });
   });
 }
 
+
 /* ══════════════════════════════════════════════════════════════
-   MILESTONES VIEW
+   CARDS VIEW — Generic card grid with expandChildren
    ══════════════════════════════════════════════════════════════ */
-var msFilter = { status: '' };
-
-function renderMsFilters() {
-  var c = document.getElementById('ms-filters');
-  var msStatuses = (D.config && D.config.statuses && D.config.statuses.milestone) ?
-    D.config.statuses.milestone.map(function(s) { return s; }) :
-    [{key:'planned',label:'Planned'},{key:'active',label:'Active'},{key:'completed',label:'Completed'}];
-
-  c.innerHTML = '<label>Filter:</label>' +
-    '<select data-msf="status"><option value="">All Statuses</option>' +
-    msStatuses.map(function(s) {
-      return '<option value="' + s.key + '"' + (msFilter.status === s.key ? ' selected' : '') + '>' + escHtml(s.label) + '</option>';
-    }).join('') + '</select>';
-  c.querySelector('select[data-msf]').addEventListener('change', function(e) { msFilter.status = e.target.value; renderMilestones(); });
-}
-
-function renderMilestones() {
-  var c = document.getElementById('milestones-container');
-  var taskPlural = ENTITY_NAMES.task ? ENTITY_NAMES.task.plural.toLowerCase() : 'tasks';
-  var msDir = ENTITY_NAMES.milestone ? ENTITY_NAMES.milestone.dir : 'milestones';
-  var msPlural = ENTITY_NAMES.milestone ? ENTITY_NAMES.milestone.plural.toLowerCase() : 'milestones';
-  if (!D.loaded) { c.innerHTML = '<div class="loading-container"><div class="skeleton skeleton-card" style="height:200px"></div></div>'; return; }
-
-  var milestones = D.milestones;
-  if (msFilter.status) milestones = milestones.filter(function(m) { return m.status === msFilter.status; });
-
-  if (!milestones.length) {
-    c.innerHTML = '<div class="empty"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg><p>' + (D.milestones.length ? 'No ' + escHtml(msPlural) + ' match filter.' : 'No ' + escHtml(msPlural) + ' yet. Create milestone directories under project/' + escHtml(msDir) + '/ to get started.') + '</p></div>';
+
+function renderCards(container, tabConfig) {
+  if (!D.loaded || !tabConfig || !tabConfig.entity) {
+    container.innerHTML = '<div class="loading-container">' +
+      '<div class="skeleton skeleton-card" style="height:120px"></div>'.repeat(4) + '</div>';
+    return;
+  }
+
+  var entityType = tabConfig.entity;
+  var cardsConfig = tabConfig.cards || {};
+  var fields = cardsConfig.fields || ['title', 'status'];
+  var showProgress = cardsConfig.showProgress;
+  var expandChildren = cardsConfig.expandChildren;
+  var items = getFilteredItems(tabConfig);
+
+  if (items.length === 0) {
+    container.innerHTML = emptyState(entityType);
     return;
   }
 
-  c.innerHTML = milestones.map(function(ms) {
-    var pct = ms.progress || 0;
-    var fc = ms.featureCount || 0, cc = ms.completedCount || 0;
-    var msEpics = D.epics.filter(function(e) { return e.milestone === (ms.id || ms._dir); });
-    var epicCards = msEpics.length ? msEpics.map(function(e) {
-      var ep = e.progress || 0;
-      var ec = epicColor(e.id || e.title || '');
-      return '<div class="ms-epic" data-epic-id="' + escHtml(e.id || '') + '"><div class="epic-name"><span class="dot" style="background:' + ec + '"></span>' + escHtml(e.title || e.id || '') + '</div>' +
-        '<div class="epic-counts">' + (e.completedCount || 0) + ' / ' + (e.featureCount || 0) + ' ' + escHtml(taskPlural) + ' &middot; ' + (e.totalPoints || 0) + ' pts</div>' +
-        '<div class="progress progress-accent"><div class="progress-fill" style="width:' + ep + '%;background:' + ec + '"></div></div>' +
-        '<div class="epic-meta">' +
-          (e.status ? '<span class="badge ' + badgeClass('badge', e.status) + '">' + statusIcon(e.status) + ' ' + escHtml(e.status) + '</span>' : '') +
-          (e.priority ? '<span class="badge ' + badgeClass('badge', e.priority) + '">' + priorityIcon(e.priority) + ' ' + escHtml(e.priority) + '</span>' : '') +
-        '</div></div>';
-    }).join('') : '<div style="color:var(--text3);font-size:.82rem">No epics yet.</div>';
-
-    return '<div class="ms-card" data-ms-id="' + escHtml(ms.id || '') + '">' +
-      '<div class="ms-header"><h2>' + milestoneIcon(ms.status) + ' ' + escHtml(ms.title || ms.id || '') + '</h2>' +
-      '<span class="badge ' + badgeClass('badge', ms.status) + '">' + escHtml(ms.status || '') + '</span>' +
-      (ms.deadline ? '<span class="ms-deadline">' + fmtDate(ms.deadline) + '</span>' : '') + '</div>' +
-      '<div class="ms-progress"><div class="progress-label"><span>' + cc + ' / ' + fc + ' ' + escHtml(taskPlural) + '</span><span>' + pct + '%</span></div>' +
-      '<div class="progress progress-lg progress-success"><div class="progress-fill" style="width:' + pct + '%"></div></div></div>' +
-      '<div class="ms-epics">' + epicCards + '</div></div>';
-  }).join('');
-
-  // Click handlers for milestones
-  c.querySelectorAll('.ms-card[data-ms-id]').forEach(function(card) {
+  var html = '<div class="cards-grid">';
+  for (var i = 0; i < items.length; i++) {
+    var item = items[i];
+    html += renderEntityCard(item, entityType, fields, showProgress, expandChildren, tabConfig);
+  }
+  html += '</div>';
+  container.innerHTML = html;
+
+  // Click handlers
+  container.querySelectorAll('.entity-card[data-id]').forEach(function(card) {
     card.addEventListener('click', function(e) {
-      if (e.target.closest('.ms-epic')) return;
-      var ms = D.milestones.find(function(m) { return m.id === card.dataset.msId; });
-      if (ms) openPanel('milestones', ms);
+      if (e.target.closest('.child-card')) return;
+      var item = getEntities(entityType).find(function(i) { return i.id === card.dataset.id; });
+      if (item) openPanel(entityType, item);
     });
   });
 
-  // Click handlers for epics
-  c.querySelectorAll('.ms-epic[data-epic-id]').forEach(function(card) {
-    card.addEventListener('click', function(e) {
-      e.stopPropagation();
-      var epic = D.epics.find(function(ep) { return ep.id === card.dataset.epicId; });
-      if (epic) openPanel('epics', epic);
+  // Child card click handlers
+  if (expandChildren) {
+    container.querySelectorAll('.child-card[data-id]').forEach(function(card) {
+      card.addEventListener('click', function(e) {
+        e.stopPropagation();
+        var childType = card.dataset.type;
+        var childItem = getEntities(childType).find(function(i) { return i.id === card.dataset.id; });
+        if (childItem) openPanel(childType, childItem);
+      });
     });
-  });
+  }
 }
 
-/* ══════════════════════════════════════════════════════════════
-   METRICS VIEW
-   ══════════════════════════════════════════════════════════════ */
-function renderMetrics() {
-  var c = document.getElementById('metrics-container');
-  var taskPlural = ENTITY_NAMES.task ? ENTITY_NAMES.task.plural : 'Tasks';
-  if (!D.loaded) { c.innerHTML = '<div class="metrics-grid">' + '<div class="skeleton skeleton-card" style="height:200px"></div>'.repeat(4) + '</div>'; return; }
+function renderEntityCard(item, entityType, fields, showProgress, expandChildren, tabConfig) {
+  var html = '<div class="entity-card" data-id="' + escHtml(item.id || '') + '">';
+
+  // Header with status icon
+  html += '<div class="entity-card-header">';
+  if (item.status) html += '<span>' + statusIcon(entityType, item.status) + '</span>';
+  html += '<span class="entity-card-id">' + escHtml(item.id || '') + '</span>';
+  html += '</div>';
+
+  // Title
+  html += '<div class="entity-card-title">' + escHtml(item.title || '') + '</div>';
+
+  // Fields as pills
+  html += '<div class="entity-card-meta">';
+  for (var i = 0; i < fields.length; i++) {
+    var f = fields[i];
+    if (f === 'title' || f === 'id') continue;
+    if (f === 'progress' && item._progress != null) {
+      html += '<span class="pill pill-points">' + item._progress + '%</span>';
+      continue;
+    }
+    html += renderFieldPill(item, entityType, f);
+  }
+  html += '</div>';
 
-  var msProg = D.milestones.length ? D.milestones.map(function(ms) {
-    var pct = ms.progress || 0;
+  // Progress bar
+  if (showProgress && item._progress != null) {
+    var pct = item._progress || 0;
     var clr = pct >= 100 ? 'var(--success)' : pct > 50 ? 'var(--warning)' : 'var(--accent)';
-    return '<div class="health-row"><div class="health-dot" style="background:' + clr + '"></div>' + milestoneIcon(ms.status) + '<div class="health-label">' + escHtml(ms.title || ms.id || '') + '</div><div class="health-val">' + pct + '%</div></div>';
-  }).join('') : '<div style="color:var(--text3);padding:8px 0">No milestones.</div>';
+    html += '<div class="entity-card-progress">';
+    html += '<div class="progress-label"><span>' + (item._completedCount || 0) + '/' + (item._childCount || 0) + '</span><span>' + pct + '%</span></div>';
+    html += '<div class="progress progress-lg"><div class="progress-fill" style="width:' + pct + '%;background:' + clr + '"></div></div>';
+    html += '</div>';
+  }
 
-  var statuses = {};
-  D.tasks.forEach(function(f) { var s = f.status || 'unknown'; statuses[s] = (statuses[s] || 0) + 1; });
-  var statusHtml = Object.keys(statuses).map(function(s) {
-    return '<div class="health-row">' + statusIcon(s) + '<div class="health-label" style="text-transform:capitalize">' + escHtml(STATUS_LABELS[s] || s) + '</div><div class="health-val">' + statuses[s] + '</div></div>';
-  }).join('') || '<div style="color:var(--text3);padding:8px 0">No data.</div>';
+  // Expand children
+  if (expandChildren && expandChildren.entity) {
+    var childType = expandChildren.entity;
+    var childFields = expandChildren.fields || ['title'];
+    var childShowProgress = expandChildren.showProgress;
+
+    // Find children that belong to this parent
+    var children = getEntities(childType).filter(function(child) {
+      return child['_' + entityType] === item.id ||
+             child['_' + entityType] === (item._dir || item.id);
+    });
 
-  var priorities = {};
-  D.tasks.forEach(function(f) { var p = f.priority || 'none'; priorities[p] = (priorities[p] || 0) + 1; });
-  var priorityHtml = Object.keys(priorities).map(function(p) {
-    return '<div class="health-row">' + priorityIcon(p) + '<div class="health-label" style="text-transform:capitalize">' + escHtml(PRIORITY_LABELS[p] || p) + '</div><div class="health-val">' + priorities[p] + '</div></div>';
-  }).join('') || '<div style="color:var(--text3);padding:8px 0">No data.</div>';
+    if (children.length > 0) {
+      html += '<div class="entity-card-children">';
+      for (var ci = 0; ci < children.length; ci++) {
+        var child = children[ci];
+        html += '<div class="child-card" data-id="' + escHtml(child.id || '') + '" data-type="' + escHtml(childType) + '">';
+        html += '<div class="child-card-header">';
+        if (child.status || child.hill) {
+          var statusField = child.status ? 'status' : 'hill';
+          html += statusIcon(childType, child[statusField] || child.status);
+        }
+        html += '<span class="child-card-title">' + escHtml(child.title || child.id || '') + '</span>';
+        html += '</div>';
 
-  var h = D.health || {};
-  var qualHtml = '<div class="health-row"><div class="health-dot" style="background:var(--text2)"></div><div class="health-label">Total ' + escHtml(taskPlural) + '</div><div class="health-val">' + (h.totalFeatures || D.tasks.length) + '</div></div>' +
-    '<div class="health-row"><div class="health-dot" style="background:var(--success)"></div><div class="health-label">Completed</div><div class="health-val">' + (h.completedFeatures || 0) + '</div></div>' +
-    '<div class="health-row"><div class="health-dot" style="background:var(--warning)"></div><div class="health-label">In Progress</div><div class="health-val">' + (h.inProgressFeatures || 0) + '</div></div>' +
-    '<div class="health-row"><div class="health-dot" style="background:var(--accent)"></div><div class="health-label">Avg Velocity</div><div class="health-val">' + (h.velocity != null ? h.velocity + '%' : 'N/A') + '</div></div>';
+        // Child fields
+        for (var fi = 0; fi < childFields.length; fi++) {
+          var cf = childFields[fi];
+          if (cf === 'title') continue;
+          if (cf === 'hill' && child.hill) {
+            html += renderFieldPill(child, childType, 'hill');
+          } else {
+            html += renderFieldPill(child, childType, cf);
+          }
+        }
 
-  c.innerHTML = '<div class="metrics-grid">' +
-    '<div class="metric-card"><h3>Milestone Progress</h3>' + msProg + '</div>' +
-    '<div class="metric-card"><h3>Status Breakdown</h3>' + statusHtml + '</div>' +
-    '<div class="metric-card"><h3>Priority Breakdown</h3>' + priorityHtml + '</div>' +
-    '<div class="metric-card"><h3>Project Health</h3>' + qualHtml + '</div></div>';
-}
+        // Child progress
+        if (childShowProgress && child._progress != null) {
+          var cpct = child._progress || 0;
+          var cclr = cpct >= 100 ? 'var(--success)' : cpct > 50 ? 'var(--warning)' : 'var(--accent)';
+          html += '<div class="progress" style="margin-top:4px"><div class="progress-fill" style="width:' + cpct + '%;background:' + cclr + '"></div></div>';
+        }
 
-/* ══════════════════════════════════════════════════════════════
-   OVERVIEW VIEW
-   ══════════════════════════════════════════════════════════════ */
-async function renderOverview() {
-  var c = document.getElementById('overview-container');
-  if (!D.loaded) { c.innerHTML = '<div class="loading-container"><div class="skeleton skeleton-card" style="height:200px"></div></div>'; return; }
-
-  // Fetch overview data
-  var overviewMs = await fetchJson('/api/overview/milestones') || [];
-  var overviewLinks = await fetchJson('/api/overview/links');
-  var overviewMetrics = await fetchJson('/api/overview/metrics');
-
-  D.overviewLinks = overviewLinks;
-
-  var html = '<h2 style="margin-bottom:16px;font-size:16px;font-weight:700">Workspace Overview</h2>';
-
-  // Global Milestones
-  html += '<h3 style="font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);font-weight:600;margin:16px 0 8px">Global Milestones</h3>';
-  if (overviewMs.length > 0) {
-    html += overviewMs.map(function(ms) {
-      var pct = ms.combinedProgress != null ? ms.combinedProgress : (ms.progress || 0);
-      var tracked = ms.tracked || [];
-      var trackedHtml = '';
-      if (tracked.length > 0) {
-        trackedHtml = '<div class="tracked-ms"><div class="tracked-ms-header">Tracked Sub-Milestones</div>' +
-          tracked.map(function(t) {
-            return '<div class="tracked-ms-item"><span class="dot" style="background:' + (t.sourceColor || 'var(--accent)') + '"></span>' +
-              '<span style="font-size:12px;flex:1">' + escHtml(t.title || t.id || '') + '</span>' +
-              '<div class="progress progress-accent" style="width:80px"><div class="progress-fill" style="width:' + t.progress + '%;background:' + (t.sourceColor || 'var(--accent)') + '"></div></div>' +
-              '<span class="tracked-ms-pct">' + t.progress + '%</span></div>';
-          }).join('') + '</div>';
+        html += '</div>';
       }
-      return '<div class="ms-card">' +
-        '<div class="ms-header"><h2>' + milestoneIcon(ms.status) + ' ' + escHtml(ms.title || ms.id || '') + '</h2>' +
-        '<span class="badge ' + badgeClass('badge', ms.status) + '">' + escHtml(ms.status || '') + '</span>' +
-        (ms.deadline ? '<span class="ms-deadline">' + fmtDate(ms.deadline) + '</span>' : '') + '</div>' +
-        '<div class="ms-progress"><div class="progress-label"><span>' + (ms.completedCount || 0) + ' / ' + (ms.featureCount || 0) + ' tasks</span><span>' + pct + '%</span></div>' +
-        '<div class="progress progress-lg progress-success"><div class="progress-fill" style="width:' + pct + '%"></div></div></div>' +
-        trackedHtml + '</div>';
-    }).join('');
-  } else {
-    html += '<div style="color:var(--text3);padding:8px 0">No milestones found across sources.</div>';
-  }
-
-  // Cross-project links
-  if (overviewLinks && overviewLinks.links && overviewLinks.links.length > 0) {
-    html += '<h3 style="font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);font-weight:600;margin:24px 0 8px">Cross-Project Links</h3>';
-    html += '<div class="metrics-grid">';
-    var linkGroups = {};
-    overviewLinks.links.forEach(function(l) {
-      var key = (l.fromSource || 'unknown');
-      if (!linkGroups[key]) linkGroups[key] = [];
-      linkGroups[key].push(l);
-    });
-    Object.keys(linkGroups).forEach(function(src) {
-      var links = linkGroups[src];
-      html += '<div class="metric-card"><h3>' + escHtml(src) + ' Links</h3>';
-      html += links.map(function(l) {
-        return '<div class="health-row"><span style="font-size:12px;font-family:var(--mono)">' + escHtml(l.from || '') + '</span>' +
-          '<span style="color:var(--text3);margin:0 4px">&rarr;</span>' +
-          '<span class="link-chip" data-link="' + escHtml(l.to || '') + '">' +
-          '<span class="link-chip-dot" style="background:var(--accent)"></span>' + escHtml(l.to || '') + '</span></div>';
-      }).join('');
       html += '</div>';
-    });
-    html += '</div>';
-  }
-
-  // Source metrics
-  if (overviewMetrics && overviewMetrics.sources) {
-    html += '<h3 style="font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);font-weight:600;margin:24px 0 8px">Source Metrics</h3>';
-    html += '<div class="metrics-grid">';
-    Object.keys(overviewMetrics.sources).forEach(function(key) {
-      var m = overviewMetrics.sources[key];
-      var pct = m.totalTasks > 0 ? Math.round((m.completedTasks / m.totalTasks) * 100) : 0;
-      html += '<div class="metric-card" style="border-left:3px solid ' + (m.color || 'var(--accent)') + '">' +
-        '<h3>' + escHtml(m.label || key) + '</h3>' +
-        '<div class="health-row"><div class="health-label">Tasks</div><div class="health-val">' + m.totalTasks + '</div></div>' +
-        '<div class="health-row"><div class="health-label">Completed</div><div class="health-val">' + m.completedTasks + '</div></div>' +
-        '<div class="health-row"><div class="health-label">Points</div><div class="health-val">' + m.totalPoints + '</div></div>' +
-        '<div class="progress progress-lg progress-success" style="margin-top:8px"><div class="progress-fill" style="width:' + pct + '%;background:' + (m.color || 'var(--success)') + '"></div></div>' +
-        '</div>';
-    });
-    html += '</div>';
+    }
   }
 
-  c.innerHTML = html;
-
-  // Click handlers for link chips
-  c.querySelectorAll('.link-chip[data-link]').forEach(function(chip) {
-    chip.addEventListener('click', function() {
-      var ref = chip.dataset.link;
-      var parts = ref.split(':');
-      if (parts.length === 2) {
-        switchSource(parts[0]);
-        // After switch, try to find and open the item
-        setTimeout(function() {
-          var task = D.tasks.find(function(t) { return t.id === ref || t.id === parts[1]; });
-          if (task) openPanel('tasks', task);
-        }, 500);
-      }
-    });
-  });
+  html += '</div>';
+  return html;
 }
 
+
 /* ══════════════════════════════════════════════════════════════
-   NOTES VIEW — Notion-style split layout
+   LIST VIEW — Expandable list with children
    ══════════════════════════════════════════════════════════════ */
 
-var notesState = { notes: [], activeId: null, editor: null, dirty: false };
+function renderList(container, tabConfig) {
+  if (!D.loaded || !tabConfig || !tabConfig.entity) {
+    container.innerHTML = '<div class="loading-container">' +
+      '<div class="skeleton skeleton-line" style="width:100%;height:48px;margin-bottom:8px"></div>'.repeat(4) + '</div>';
+    return;
+  }
 
-function renderNotes() {
-  var container = document.getElementById('notes-container');
-  if (!container) return;
+  var entityType = tabConfig.entity;
+  var listConfig = tabConfig.list || {};
+  var fields = listConfig.fields || ['title', 'status'];
+  var expandChildren = listConfig.expandChildren;
+  var items = getFilteredItems(tabConfig);
 
-  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>';
+  if (items.length === 0) {
+    container.innerHTML = emptyState(entityType);
+    return;
+  }
 
-  loadNoteList();
+  var html = '<div class="entity-list">';
+  for (var i = 0; i < items.length; i++) {
+    var item = items[i];
+    html += renderListItem(item, entityType, fields, expandChildren, tabConfig);
+  }
+  html += '</div>';
+  container.innerHTML = html;
+
+  // Click handlers for main items
+  container.querySelectorAll('.entity-list-item[data-id]').forEach(function(el) {
+    el.addEventListener('click', function(e) {
+      if (e.target.closest('.child-list-item')) return;
+      if (e.target.closest('.list-expand-btn')) return;
+      var item = getEntities(entityType).find(function(i) { return i.id === el.dataset.id; });
+      if (item) openPanel(entityType, item);
+    });
+  });
 
-  document.getElementById('notes-new').addEventListener('click', createNewNote);
-  document.getElementById('notes-search').addEventListener('input', function() {
-    renderNoteList(this.value.toLowerCase());
+  // Expand toggle handlers
+  container.querySelectorAll('.list-expand-btn').forEach(function(btn) {
+    btn.addEventListener('click', function(e) {
+      e.stopPropagation();
+      var children = btn.closest('.entity-list-item').querySelector('.list-children');
+      if (children) {
+        var hidden = children.style.display === 'none';
+        children.style.display = hidden ? '' : 'none';
+        btn.textContent = hidden ? '\u25BC' : '\u25B6';
+      }
+    });
   });
-}
 
-async function loadNoteList() {
-  var base = apiBase();
-  var notes = await fetchJson(base + '/notes');
-  notesState.notes = notes || [];
-  renderNoteList('');
+  // Child click handlers
+  if (expandChildren) {
+    container.querySelectorAll('.child-list-item[data-id]').forEach(function(el) {
+      el.addEventListener('click', function(e) {
+        e.stopPropagation();
+        var childType = el.dataset.type;
+        var childItem = getEntities(childType).find(function(i) { return i.id === el.dataset.id; });
+        if (childItem) openPanel(childType, childItem);
+      });
+    });
+  }
 }
 
-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;
+function renderListItem(item, entityType, fields, expandChildren, tabConfig) {
+  var hasChildren = false;
+  var children = [];
+  if (expandChildren && expandChildren.entity) {
+    var childType = expandChildren.entity;
+    children = getEntities(childType).filter(function(child) {
+      return child['_' + entityType] === item.id ||
+             child['_' + entityType] === (item._dir || item.id);
     });
+    hasChildren = children.length > 0;
   }
 
-  notes.sort(function(a, b) {
-    return (b.updated || b.created || '').localeCompare(a.updated || a.created || '');
+  var html = '<div class="entity-list-item" data-id="' + escHtml(item.id || '') + '">';
+  html += '<div class="list-item-main">';
+
+  // Expand button
+  if (hasChildren) {
+    html += '<button class="list-expand-btn">\u25B6</button>';
+  } else if (expandChildren) {
+    html += '<span style="width:20px;display:inline-block"></span>';
+  }
+
+  // Status icon
+  if (item.status) {
+    html += '<span class="list-item-status">' + statusIcon(entityType, item.status) + '</span>';
+  }
+
+  // Title
+  html += '<span class="list-item-title">' + escHtml(item.title || item.id || '') + '</span>';
+
+  // Fields
+  html += '<span class="list-item-fields">';
+  for (var i = 0; i < fields.length; i++) {
+    var f = fields[i];
+    if (f === 'title' || f === 'id') continue;
+    if (f === 'progress' && item._progress != null) {
+      var pct = item._progress || 0;
+      var clr = pct >= 100 ? 'var(--success)' : pct > 50 ? 'var(--warning)' : 'var(--accent)';
+      html += '<span class="list-item-progress"><div class="progress" style="width:80px"><div class="progress-fill" style="width:' + pct + '%;background:' + clr + '"></div></div><span class="pill pill-points">' + pct + '%</span></span>';
+      continue;
+    }
+    html += renderFieldPill(item, entityType, f);
+  }
+  html += '</span>';
+  html += '</div>';
+
+  // Children
+  if (hasChildren && expandChildren) {
+    var childType = expandChildren.entity;
+    var childFields = expandChildren.fields || ['title', 'status'];
+    html += '<div class="list-children" style="display:none">';
+    for (var ci = 0; ci < children.length; ci++) {
+      var child = children[ci];
+      html += '<div class="child-list-item" data-id="' + escHtml(child.id || '') + '" data-type="' + escHtml(childType) + '">';
+      if (child.status) html += statusIcon(childType, child.status);
+      html += '<span class="child-list-title">' + escHtml(child.title || child.id || '') + '</span>';
+      for (var fi = 0; fi < childFields.length; fi++) {
+        var cf = childFields[fi];
+        if (cf === 'title') continue;
+        html += renderFieldPill(child, childType, cf);
+      }
+      html += '</div>';
+    }
+    html += '</div>';
+  }
+
+  html += '</div>';
+  return html;
+}
+
+
+/* ══════════════════════════════════════════════════════════════
+   METRICS VIEW — Config-driven metric cards
+   ══════════════════════════════════════════════════════════════ */
+
+function renderMetrics(container, tabConfig) {
+  if (!D.loaded) {
+    container.innerHTML = '<div class="metrics-grid">' +
+      '<div class="skeleton skeleton-card" style="height:200px"></div>'.repeat(4) + '</div>';
+    return;
+  }
+
+  var metricsConfig = tabConfig && tabConfig.metrics ? tabConfig.metrics : null;
+  var cards = metricsConfig && metricsConfig.cards ? metricsConfig.cards : [];
+
+  // If no config, render default cards
+  if (cards.length === 0) {
+    cards = [
+      { title: 'Status Breakdown', type: 'status-breakdown', entity: 'task' },
+      { title: 'Project Health', type: 'health' }
+    ];
+  }
+
+  var html = '<div class="metrics-grid">';
+  for (var i = 0; i < cards.length; i++) {
+    html += renderMetricCard(cards[i]);
+  }
+  html += '</div>';
+  container.innerHTML = html;
+}
+
+function renderMetricCard(cardConfig) {
+  var html = '<div class="metric-card"><h3>' + escHtml(cardConfig.title) + '</h3>';
+
+  switch (cardConfig.type) {
+    case 'progress-by-parent':
+      html += renderProgressByParent(cardConfig);
+      break;
+    case 'status-breakdown':
+      html += renderStatusBreakdown(cardConfig);
+      break;
+    case 'health':
+      html += renderHealthCard(cardConfig);
+      break;
+    case 'hill-chart':
+      html += renderHillChart(cardConfig);
+      break;
+    default:
+      html += '<div style="color:var(--text3);padding:8px 0">Unknown card type: ' + escHtml(cardConfig.type) + '</div>';
+  }
+
+  html += '</div>';
+  return html;
+}
+
+function renderProgressByParent(config) {
+  var parentType = config.parent;
+  if (!parentType) return '<div style="color:var(--text3)">No parent type configured.</div>';
+
+  var parents = getEntities(parentType);
+  if (parents.length === 0) {
+    var singular = getEntitySingular(parentType);
+    return '<div style="color:var(--text3);padding:8px 0">No ' + escHtml(singular.toLowerCase()) + 's.</div>';
+  }
+
+  var html = '';
+  for (var i = 0; i < parents.length; i++) {
+    var p = parents[i];
+    var pct = p._progress || 0;
+    var clr = pct >= 100 ? 'var(--success)' : pct > 50 ? 'var(--warning)' : 'var(--accent)';
+    html += '<div class="health-row">' +
+      '<div class="health-dot" style="background:' + clr + '"></div>' +
+      statusIcon(parentType, p.status) +
+      '<div class="health-label">' + escHtml(p.title || p.id || '') + '</div>' +
+      '<div class="health-val">' + pct + '%</div>' +
+    '</div>';
+  }
+  return html;
+}
+
+function renderStatusBreakdown(config) {
+  var entityType = config.entity;
+  if (!entityType) return '<div style="color:var(--text3)">No entity type configured.</div>';
+
+  var items = getEntities(entityType);
+  var statuses = {};
+  items.forEach(function(item) {
+    var s = item.status || 'unknown';
+    statuses[s] = (statuses[s] || 0) + 1;
+  });
+
+  var keys = Object.keys(statuses);
+  if (keys.length === 0) return '<div style="color:var(--text3);padding:8px 0">No data.</div>';
+
+  var html = '';
+  for (var i = 0; i < keys.length; i++) {
+    var s = keys[i];
+    html += '<div class="health-row">' +
+      statusIcon(entityType, s) +
+      '<div class="health-label" style="text-transform:capitalize">' + escHtml(getFieldLabel(entityType, 'status', s)) + '</div>' +
+      '<div class="health-val">' + statuses[s] + '</div>' +
+    '</div>';
+  }
+  return html;
+}
+
+function renderHealthCard() {
+  var h = D.health || {};
+  var totals = h.totals || {};
+  var total = totals.total || 0;
+  var completed = totals.completed || 0;
+  var inProgress = totals.inProgress || 0;
+
+  return '<div class="health-row"><div class="health-dot" style="background:var(--text2)"></div><div class="health-label">Total Items</div><div class="health-val">' + total + '</div></div>' +
+    '<div class="health-row"><div class="health-dot" style="background:var(--success)"></div><div class="health-label">Completed</div><div class="health-val">' + completed + '</div></div>' +
+    '<div class="health-row"><div class="health-dot" style="background:var(--warning)"></div><div class="health-label">In Progress</div><div class="health-val">' + inProgress + '</div></div>' +
+    '<div class="health-row"><div class="health-dot" style="background:var(--accent)"></div><div class="health-label">Progress</div><div class="health-val">' + (total > 0 ? Math.round(completed / total * 100) + '%' : 'N/A') + '</div></div>';
+}
+
+function renderHillChart(config) {
+  var entityType = config.entity;
+  if (!entityType) return '<div style="color:var(--text3)">No entity type configured.</div>';
+
+  var items = getEntities(entityType);
+  if (items.length === 0) {
+    return '<div style="color:var(--text3);padding:8px 0">No ' + escHtml(getEntitySingular(entityType).toLowerCase()) + 's.</div>';
+  }
+
+  // Hill chart: figuring out (uphill) → making it happen (downhill) → done
+  var fields = getEntityFields(entityType);
+  var hillField = fields.hill;
+  if (!hillField || !hillField.values) {
+    return '<div style="color:var(--text3);padding:8px 0">No hill field defined.</div>';
+  }
+
+  var html = '';
+  for (var i = 0; i < items.length; i++) {
+    var item = items[i];
+    var hillVal = item.hill || 'unknown';
+    html += '<div class="health-row">' +
+      statusIcon(entityType, hillVal) +
+      '<div class="health-label">' + escHtml(item.title || item.id || '') + '</div>' +
+      '<div class="health-val" style="font-size:11px">' + escHtml(getFieldLabel(entityType, 'hill', hillVal)) + '</div>' +
+    '</div>';
+  }
+  return html;
+}
+
+
+
+/* ══════════════════════════════════════════════════════════════
+   NOTES VIEW — Notion-style split layout (config-driven)
+   ══════════════════════════════════════════════════════════════ */
+
+var notesState = { notes: [], activeId: null, editor: null, dirty: false, entityType: 'note' };
+
+function renderNotes(container, tabConfig) {
+  if (!container) return;
+  var entityType = tabConfig && tabConfig.entity ? tabConfig.entity : 'note';
+  notesState.entityType = entityType;
+  var plural = getEntityPlural(entityType);
+
+  // Notes view needs special full-height layout
+  var viewEl = container.closest('.view');
+  if (viewEl) {
+    viewEl.style.display = 'flex';
+    viewEl.style.flexDirection = 'column';
+    viewEl.style.margin = '-20px -24px';
+    viewEl.style.height = 'calc(100% + 40px)';
+  }
+  container.style.flex = '1';
+  container.style.overflow = 'hidden';
+
+  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>';
+
+  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 plural = getEntityPlural(notesState.entityType);
+  var notes = await fetchJson(base + '/' + plural);
+  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) {
@@ -2276,7 +2515,8 @@ async function selectNote(id) {
   pane.innerHTML = '<div class="notes-editor-loading">Loading...</div>';
 
   var base = apiBase();
-  var note = await fetchJson(base + '/notes/' + encodeURIComponent(id));
+  var plural = getEntityPlural(notesState.entityType);
+  var note = await fetchJson(base + '/' + plural + '/' + encodeURIComponent(id));
   if (!note) {
     pane.innerHTML = '<div class="notes-empty-state"><p>Note not found</p></div>';
     return;
@@ -2306,7 +2546,6 @@ async function selectNote(id) {
     deleteCurrentNote(id);
   });
 
-  // Ctrl/Cmd+S to save
   pane.addEventListener('keydown', function(e) {
     if ((e.metaKey || e.ctrlKey) && e.key === 's') {
       e.preventDefault();
@@ -2317,6 +2556,7 @@ async function selectNote(id) {
 
 async function saveCurrentNote() {
   if (!notesState.activeId) return;
+  var plural = getEntityPlural(notesState.entityType);
 
   var titleEl = document.getElementById('notes-title');
   var title = titleEl ? titleEl.value : '';
@@ -2328,7 +2568,7 @@ async function saveCurrentNote() {
   updates.content = content;
   updates.updated = new Date().toISOString().split('T')[0];
 
-  var ok = await patchItem('notes', notesState.activeId, updates);
+  var ok = await patchItem(plural, notesState.activeId, updates);
   if (ok) {
     notesState.dirty = false;
     await loadNoteList();
@@ -2336,7 +2576,8 @@ async function saveCurrentNote() {
 }
 
 async function createNewNote() {
-  var result = await createItem('notes', { title: 'Untitled', content: '' });
+  var plural = getEntityPlural(notesState.entityType);
+  var result = await createItem(plural, { title: 'Untitled', content: '' });
   if (result && result.id) {
     await loadNoteList();
     selectNote(result.id);
@@ -2345,7 +2586,8 @@ async function createNewNote() {
 
 async function deleteCurrentNote(id) {
   if (!confirm('Delete this note?')) return;
-  var ok = await deleteItem('notes', id);
+  var plural = getEntityPlural(notesState.entityType);
+  var ok = await deleteItem(plural, id);
   if (ok) {
     if (notesState.editor) {
       destroyEditor(notesState.editor);
@@ -2366,268 +2608,140 @@ async function deleteCurrentNote(id) {
 
 
 /* ══════════════════════════════════════════════════════════════
-   CRUD HELPERS
+   PANEL — Dynamic detail panel from config
    ══════════════════════════════════════════════════════════════ */
-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;
-}
+var panelState = { open: false, entityType: null, item: null, isCreate: false, editor: null };
 
-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();
+async function openPanel(entityType, item) {
+  panelState = { open: true, entityType: entityType, item: JSON.parse(JSON.stringify(item)), isCreate: false, editor: null };
   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 };
+  // Fetch full item with content from single endpoint
+  var plural = getEntityPlural(entityType);
+  var base = apiBase();
+  var full = await fetchJson(base + '/' + plural + '/' + encodeURIComponent(item.id));
+  if (full && full.content !== undefined) {
+    panelState.item.content = full.content;
+  }
 
-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 };
+  panelState = { open: false, entityType: null, item: null, isCreate: false, editor: null };
   document.getElementById('detail-panel').classList.remove('open');
   document.getElementById('panel-overlay').classList.remove('open');
 }
 
+function openCreateDialog(entityType) {
+  var fields = getEntityFields(entityType);
+  var item = { _isNew: true, title: '' };
+
+  // Set defaults from field definitions
+  for (var name in fields) {
+    var f = fields[name];
+    if (f.default !== undefined) item[name] = f.default;
+    else if (f.type === 'enum' && f.values && f.values.length > 0) item[name] = f.values[0].key;
+    else if (f.type === 'number') item[name] = null;
+    else if (f.type === 'list') item[name] = '';
+    else item[name] = '';
+  }
+
+  // Set ancestor defaults
+  var ancestors = findAncestors(entityType);
+  for (var i = 0; i < ancestors.length; i++) {
+    var ancType = ancestors[i];
+    var ancItems = getEntities(ancType);
+    if (ancItems.length > 0) {
+      item[ancType] = ancItems[0]._dir || ancItems[0].id || '';
+    }
+  }
+
+  panelState = { open: true, entityType: entityType, item: item, isCreate: true, editor: null };
+  renderPanel();
+  document.getElementById('detail-panel').classList.add('open');
+  document.getElementById('panel-overlay').classList.add('open');
+}
+
 function renderPanel() {
   var panel = document.getElementById('detail-panel');
-  var t = panelState.type;
+  var entityType = panelState.entityType;
   var item = panelState.item;
   var isCreate = panelState.isCreate;
-  if (!item) return;
-
-  var isReadonly = !isCreate && item.readonly;
+  if (!item || !entityType) return;
 
-  var typeLabel;
-  if (t === 'tasks') typeLabel = ENTITY_NAMES.task ? ENTITY_NAMES.task.singular : 'Task';
-  else if (t === 'epics') typeLabel = ENTITY_NAMES.epic ? ENTITY_NAMES.epic.singular : 'Epic';
-  else typeLabel = ENTITY_NAMES.milestone ? ENTITY_NAMES.milestone.singular : 'Milestone';
+  var isReadonly = !isCreate && (item._readonly || !isSourceWritable());
+  var typeLabel = getEntitySingular(entityType);
+  var fields = getEntityFields(entityType);
+  var plural = getEntityPlural(entityType);
 
   // ── 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>';
+  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) ──
+  // ── Title ──
   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) ──
+  // ── Properties ──
   html += '<div class="panel-properties">';
-
-  // Properties toggle header
-  html += '<div class="prop-row prop-row-toggle" id="props-toggle"><span class="prop-label" style="font-weight:600"><span class="ai-toggle-arrow" id="props-arrow">&#9654;</span> Properties</span><div class="prop-value"></div></div>';
-  html += '<div class="props-fields-body" id="props-fields-body" style="display:none">';
-
-  // Status
-  var statusOptions, statusLabels;
-  if (t === 'tasks' && D.config && D.config.statuses && D.config.statuses.task) {
-    statusOptions = D.config.statuses.task.map(function(s) { return s.key; });
-    statusLabels = {};
-    D.config.statuses.task.forEach(function(s) { statusLabels[s.key] = s.label; });
-  } else if (t === 'epics' && D.config && D.config.statuses && D.config.statuses.epic) {
-    statusOptions = D.config.statuses.epic.map(function(s) { return s.key; });
-    statusLabels = {};
-    D.config.statuses.epic.forEach(function(s) { statusLabels[s.key] = s.label; });
-  } else if (t === 'milestones' && D.config && D.config.statuses && D.config.statuses.milestone) {
-    statusOptions = D.config.statuses.milestone.map(function(s) { return s.key; });
-    statusLabels = {};
-    D.config.statuses.milestone.forEach(function(s) { statusLabels[s.key] = s.label; });
-  } else if (t === 'tasks') {
-    statusOptions = STATUSES;
-    statusLabels = STATUS_LABELS;
-  } else {
-    statusOptions = ['planned', 'active', 'completed', 'cancelled'];
-    statusLabels = { planned: 'Planned', active: 'Active', completed: 'Completed', cancelled: 'Cancelled' };
-  }
-
-  html += '<div class="prop-row"><span class="prop-label">Status</span><div class="prop-value"><span id="p-status-icon">' + statusIcon(item.status) + '</span>' +
-    '<select id="p-status"' + (isReadonly ? ' disabled' : '') + '>' + statusOptions.map(function(s) {
-      return '<option value="' + s + '"' + (item.status === s ? ' selected' : '') + '>' + (statusLabels[s] || s) + '</option>';
-    }).join('') + '</select></div></div>';
-
-  if (t === 'tasks' || t === 'epics') {
-    html += '<div class="prop-row"><span class="prop-label">Priority</span><div class="prop-value"><span id="p-priority-icon">' + priorityIcon(item.priority) + '</span>' +
-      '<select id="p-priority"' + (isReadonly ? ' disabled' : '') + '><option value="">None</option>' + PRIORITIES.map(function(p) {
-        return '<option value="' + p + '"' + (item.priority === p ? ' selected' : '') + '>' + (PRIORITY_LABELS[p] || p) + '</option>';
-      }).join('') + '</select></div></div>';
-  }
-
-  if (t === 'tasks') {
-    html += '<div class="prop-row"><span class="prop-label">Points</span><div class="prop-value"><input type="number" id="p-points" min="0" max="100" value="' + (item.points != null ? item.points : '') + '" placeholder="0"' + (isReadonly ? ' disabled' : '') + '></div></div>';
-
-    var assignedVal = Array.isArray(item.assigned) ? item.assigned.join(', ') : (item.assigned || '');
-    html += '<div class="prop-row"><span class="prop-label">Assigned</span><div class="prop-value"><input type="text" id="p-assigned" value="' + escHtml(assignedVal) + '" placeholder="Unassigned"' + (isReadonly ? ' disabled' : '') + '></div></div>';
-
-    html += '<div class="prop-row"><span class="prop-label">Sprint</span><div class="prop-value"><select id="p-sprint"' + (isReadonly ? ' disabled' : '') + '><option value="">None</option>' +
-      D.allSprints.map(function(s) { return '<option value="' + escHtml(s.id || '') + '"' + (item.sprint === s.id ? ' selected' : '') + '>' + escHtml(s.id || '') + '</option>'; }).join('') +
-      '</select></div></div>';
-
-    if (isCreate) {
-      html += '<div class="prop-row"><span class="prop-label">Milestone</span><div class="prop-value"><select id="p-milestone">' +
-        D.milestones.map(function(m) { return '<option value="' + escHtml(m._dir || m.id || '') + '"' + (item.milestone === (m._dir || m.id) ? ' selected' : '') + '>' + escHtml(m.title || m.id || '') + '</option>'; }).join('') +
-        '</select></div></div>';
-      html += '<div class="prop-row"><span class="prop-label">Epic</span><div class="prop-value"><select id="p-epic-select">' +
-        D.epics.map(function(e) { return '<option value="' + escHtml(e._dir || e.id || '') + '"' + (item.epic === (e._dir || e.id) ? ' selected' : '') + '>' + escHtml(e.title || e.id || '') + '</option>'; }).join('') +
-        '</select></div></div>';
-    } else {
-      html += '<div class="prop-row"><span class="prop-label">Epic</span><div class="prop-value"><span class="prop-text">' + escHtml(item.epic || 'None') + '</span></div></div>';
-    }
-  }
-
-  if (t === 'milestones') {
-    html += '<div class="prop-row"><span class="prop-label">Deadline</span><div class="prop-value"><input type="date" id="p-deadline" value="' + fmtDate(item.deadline) + '"' + (isReadonly ? ' disabled' : '') + '></div></div>';
-  }
-
-  if (isCreate && (t === 'epics' || t === 'milestones')) {
-    if (t === 'epics') {
-      html += '<div class="prop-row"><span class="prop-label">Milestone</span><div class="prop-value"><select id="p-milestone">' +
-        D.milestones.map(function(m) { return '<option value="' + escHtml(m._dir || m.id || '') + '">' + escHtml(m.title || m.id || '') + '</option>'; }).join('') +
-        '</select></div></div>';
-    }
-  }
-
-  // Links
-  if (t === 'tasks' && !isCreate && item.links && Array.isArray(item.links) && item.links.length > 0) {
-    html += '<div class="prop-row"><span class="prop-label">Links</span><div class="prop-value"><div class="link-chips">';
-    item.links.forEach(function(link) {
-      var parts = String(link).split(':');
-      var srcName = parts.length === 2 ? parts[0] : null;
-      var srcColor = 'var(--accent)';
-      if (srcName && D.config && D.config.workspace && D.config.workspace.sources) {
-        var src = D.config.workspace.sources.find(function(s) { return s.name === srcName; });
-        if (src && src.color) srcColor = src.color;
+  html += '<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">&#9660;</span> Properties</span><div class="prop-value"></div></div>';
+  html += '<div class="props-fields-body" id="props-fields-body">';
+
+  // Generate property rows from field definitions
+  for (var name in fields) {
+    var field = fields[name];
+    var value = item[name];
+    html += renderPropRow(name, field, value, entityType, isReadonly);
+  }
+
+  // Ancestor fields for create
+  if (isCreate) {
+    var ancestors = findAncestors(entityType);
+    for (var ai = 0; ai < ancestors.length; ai++) {
+      var ancType = ancestors[ai];
+      var ancDef = getEntityDef(ancType);
+      var ancItems = getEntities(ancType);
+      var ancLabel = ancDef ? ancDef.singular : ancType;
+      var ancVal = item[ancType] || '';
+
+      html += '<div class="prop-row"><span class="prop-label">' + escHtml(ancLabel) + '</span><div class="prop-value">';
+      html += '<select id="p-ancestor-' + ancType + '">';
+      for (var aci = 0; aci < ancItems.length; aci++) {
+        var a = ancItems[aci];
+        var aId = a._dir || a.id || '';
+        html += '<option value="' + escHtml(aId) + '"' + (ancVal === aId ? ' selected' : '') + '>' + escHtml(a.title || a.id || '') + '</option>';
       }
-      html += '<span class="link-chip" data-link="' + escHtml(String(link)) + '">' +
-        '<span class="link-chip-dot" style="background:' + srcColor + '"></span>' +
-        escHtml(String(link)) + '</span>';
-    });
-    html += '</div></div></div>';
-  }
-
-  // Reverse links
-  if (t === 'tasks' && !isCreate && D.overviewLinks && D.overviewLinks.reverseLinks && item.id) {
-    var reverseRefs = D.overviewLinks.reverseLinks[item.id] || [];
-    if (reverseRefs.length > 0) {
-      html += '<div class="prop-row"><span class="prop-label">Referenced By</span><div class="prop-value"><div class="link-chips">';
-      reverseRefs.forEach(function(ref) {
-        var srcColor = ref.sourceColor || 'var(--accent)';
-        html += '<span class="link-chip" data-link="' + escHtml(ref.from || '') + '">' +
-          '<span class="link-chip-dot" style="background:' + srcColor + '"></span>' +
-          escHtml(ref.from || '') + '</span>';
-      });
-      html += '</div></div></div>';
+      html += '</select></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>';
+  } else {
+    // Show ancestor refs as readonly
+    var ancestors = findAncestors(entityType);
+    for (var ai = 0; ai < ancestors.length; ai++) {
+      var ancType = ancestors[ai];
+      var ancVal = item['_' + ancType];
+      if (ancVal) {
+        var ancDef = getEntityDef(ancType);
+        var ancLabel = ancDef ? ancDef.singular : ancType;
+        html += '<div class="prop-row"><span class="prop-label">' + escHtml(ancLabel) + '</span><div class="prop-value"><span class="prop-text">' + escHtml(ancVal) + '</span></div></div>';
       }
-      html += '</div></div>';
     }
-    html += '</div>'; // close ai-fields-body
   }
 
+  html += '</div>'; // close props-fields-body
   html += '</div>'; // close panel-properties
 
-  // ── Content Editor (fills remaining space) ──
+  // ── Content Editor ──
   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 {
@@ -2636,7 +2750,7 @@ function renderPanel() {
 
   // ── Footer ──
   html += '<div class="panel-footer">';
-  if (!isCreate && !isReadonly && isSourceWritable()) {
+  if (!isCreate && !isReadonly) {
     html += '<button class="btn btn-danger btn-sm" id="panel-archive-btn">Archive</button>';
   }
   html += '<span style="flex:1"></span>';
@@ -2648,7 +2762,7 @@ function renderPanel() {
 
   panel.innerHTML = html;
 
-  // Initialize Editor.js for content (if not readonly)
+  // Initialize Editor.js
   if (!isReadonly) {
     panelState.editor = initEditor('p-content-editor', item.content || '', {
       placeholder: 'Type / for commands, or start writing...',
@@ -2666,13 +2780,13 @@ function renderPanel() {
   if (archiveBtn) {
     archiveBtn.addEventListener('click', function() {
       if (!confirm('Archive this ' + typeLabel.toLowerCase() + '?')) return;
-      deleteItem(t, item.id).then(function(ok) {
+      deleteItem(plural, item.id).then(function(ok) {
         if (ok) { closePanel(); refreshData(); }
       });
     });
   }
 
-  // Properties section toggle
+  // Properties toggle
   var propsToggle = document.getElementById('props-toggle');
   if (propsToggle) {
     propsToggle.addEventListener('click', function() {
@@ -2688,139 +2802,50 @@ function renderPanel() {
     });
   }
 
-  // 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;';
+  // Longtext expand/collapse
+  panel.querySelectorAll('.prop-longtext-preview').forEach(function(prev) {
+    prev.addEventListener('click', function() {
+      var wrap = prev.parentNode;
+      var textarea = wrap.querySelector('.prop-longtext-editor');
+      var toggle = prev.querySelector('.prop-longtext-toggle');
+      if (textarea.style.display === 'none') {
+        textarea.style.display = '';
+        prev.style.display = 'none';
+        textarea.style.height = 'auto';
+        textarea.style.height = Math.max(80, textarea.scrollHeight) + 'px';
+        textarea.focus();
       }
     });
-  }
-
-  // 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(); });
+  });
+  panel.querySelectorAll('.prop-longtext-editor').forEach(function(ta) {
+    ta.addEventListener('blur', function() {
+      var wrap = ta.parentNode;
+      var prev = wrap.querySelector('.prop-longtext-preview');
+      var textSpan = prev.querySelector('.prop-longtext-text');
+      var val = ta.value || '';
+      var truncated = val.length > 80 ? val.substring(0, 80) + '...' : (val || 'Empty');
+      textSpan.textContent = truncated;
+      ta.style.display = 'none';
+      prev.style.display = '';
     });
-
-    // Click on container focuses input
-    container.addEventListener('click', function(e) {
-      if (e.target === container) textInput.focus();
+    ta.addEventListener('input', function() {
+      ta.style.height = 'auto';
+      ta.style.height = Math.max(80, ta.scrollHeight) + 'px';
     });
+  });
 
-    // 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();
+  // Live icon updates for enum fields
+  panel.querySelectorAll('select[id^="p-"]').forEach(function(sel) {
+    sel.addEventListener('change', function() {
+      var iconEl = sel.parentNode.querySelector('.prop-icon');
+      if (iconEl) {
+        var fieldName = sel.id.replace('p-', '');
+        iconEl.innerHTML = statusIcon(entityType, sel.value);
       }
     });
-
-    // Close dropdown on blur
-    textInput.addEventListener('blur', function() {
-      setTimeout(closeDropdown, 150);
-    });
   });
 
-  // Live icon updates
-  var statusSel = document.getElementById('p-status');
-  if (statusSel) {
-    statusSel.addEventListener('change', function() {
-      var iconEl = document.getElementById('p-status-icon');
-      if (iconEl) iconEl.innerHTML = statusIcon(statusSel.value);
-    });
-  }
-  var prioritySel = document.getElementById('p-priority');
-  if (prioritySel) {
-    prioritySel.addEventListener('change', function() {
-      var iconEl = document.getElementById('p-priority-icon');
-      if (iconEl) iconEl.innerHTML = priorityIcon(prioritySel.value);
-    });
-  }
-
-  // Ctrl/Cmd+S to save
+  // Ctrl/Cmd+S
   panel.addEventListener('keydown', function(e) {
     if ((e.metaKey || e.ctrlKey) && e.key === 's') {
       e.preventDefault();
@@ -2828,180 +2853,496 @@ function renderPanel() {
       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);
+function renderPropRow(name, field, value, entityType, isReadonly) {
+  var label = field.label || name.charAt(0).toUpperCase() + name.slice(1);
+  var html = '<div class="prop-row"><span class="prop-label">' + escHtml(label) + '</span><div class="prop-value">';
+
+  switch (field.type) {
+    case 'enum':
+      if (field.values) {
+        html += '<span class="prop-icon">' + statusIcon(entityType, value) + '</span>';
+        html += '<select id="p-' + name + '"' + (isReadonly ? ' disabled' : '') + '>';
+        for (var i = 0; i < field.values.length; i++) {
+          var v = field.values[i];
+          html += '<option value="' + escHtml(v.key) + '"' + (value === v.key ? ' selected' : '') + '>' + escHtml(v.label) + '</option>';
+        }
+        html += '</select>';
       }
-    });
-  });
+      break;
+
+    case 'number':
+      html += '<input type="number" id="p-' + name + '" value="' + (value != null ? value : '') + '" placeholder="0"' + (isReadonly ? ' disabled' : '') + '>';
+      break;
+
+    case 'date':
+      html += '<input type="date" id="p-' + name + '" value="' + fmtDate(value) + '"' + (isReadonly ? ' disabled' : '') + '>';
+      break;
+
+    case 'string':
+      html += '<input type="text" id="p-' + name + '" value="' + escHtml(value || '') + '" placeholder=""' + (isReadonly ? ' disabled' : '') + '>';
+      break;
+
+    case 'text':
+      html += '<input type="text" id="p-' + name + '" value="' + escHtml(value || '') + '" placeholder=""' + (isReadonly ? ' disabled' : '') + '>';
+      break;
+
+    case 'longtext':
+      var ltVal = value || '';
+      var ltTruncated = ltVal.length > 80 ? ltVal.substring(0, 80) + '...' : ltVal;
+      html += '<div class="prop-longtext" id="p-lt-wrap-' + name + '">';
+      html += '<div class="prop-longtext-preview" id="p-lt-preview-' + name + '" title="Click to expand">';
+      html += '<span class="prop-longtext-text">' + escHtml(ltTruncated || 'Empty') + '</span>';
+      html += '<span class="prop-longtext-toggle">&#9660;</span>';
+      html += '</div>';
+      html += '<textarea id="p-' + name + '" class="prop-longtext-editor" style="display:none" placeholder="Enter text..."' + (isReadonly ? ' disabled' : '') + '>' + escHtml(ltVal) + '</textarea>';
+      html += '</div>';
+      break;
+
+    case 'list':
+      var listVal = Array.isArray(value) ? value.join(', ') : (value || '');
+      html += '<input type="text" id="p-' + name + '" value="' + escHtml(listVal) + '" placeholder="Comma-separated"' + (isReadonly ? ' disabled' : '') + '>';
+      break;
+
+    case 'ref':
+      if (isReadonly || !field.entity) {
+        var refVal = Array.isArray(value) ? value.join(', ') : (value || '');
+        html += '<span class="prop-text">' + escHtml(refVal || 'None') + '</span>';
+      } else {
+        html += '<input type="text" id="p-' + name + '" value="' + escHtml(Array.isArray(value) ? value.join(', ') : (value || '')) + '" placeholder="IDs"' + (isReadonly ? ' disabled' : '') + '>';
+      }
+      break;
+
+    default:
+      html += '<span class="prop-text">' + escHtml(value || '') + '</span>';
+  }
+
+  html += '</div></div>';
+  return html;
 }
 
+/* ── Save (Update) ───────────────────────────────────────── */
 async function savePanel() {
-  var t = panelState.type;
+  var entityType = panelState.entityType;
   var item = panelState.item;
-  if (!t || !item) return;
+  if (!entityType || !item) return;
 
+  var fields = getEntityFields(entityType);
+  var plural = getEntityPlural(entityType);
   var updates = {};
 
+  // Title
   var titleEl = document.getElementById('p-title');
   if (titleEl && titleEl.value !== (item.title || '')) updates.title = titleEl.value;
 
-  var statusEl = document.getElementById('p-status');
-  if (statusEl && statusEl.value !== (item.status || '')) updates.status = statusEl.value;
+  // Fields
+  for (var name in fields) {
+    var el = document.getElementById('p-' + name);
+    if (!el) continue;
+    var newVal = readFieldValue(el, fields[name]);
+    var oldVal = item[name];
+
+    if (fields[name].type === 'number') {
+      if (newVal !== oldVal) updates[name] = newVal;
+    } else if (fields[name].type === 'list') {
+      var oldList = Array.isArray(oldVal) ? oldVal.join(', ') : (oldVal || '');
+      if (el.value.trim() !== oldList) updates[name] = newVal;
+    } else if (fields[name].type === 'date') {
+      if (el.value !== fmtDate(oldVal)) updates[name] = newVal;
+    } else {
+      if (newVal !== (oldVal || '')) updates[name] = newVal;
+    }
+  }
 
-  if (t === 'tasks' || t === 'epics') {
-    var priorityEl = document.getElementById('p-priority');
-    if (priorityEl && priorityEl.value !== (item.priority || '')) updates.priority = priorityEl.value || null;
+  // Content
+  if (panelState.editor) {
+    var newContent = await getEditorMarkdown(panelState.editor);
+    if (newContent !== (item.content || '')) updates.content = newContent;
   }
 
-  if (t === 'tasks') {
-    var pointsEl = document.getElementById('p-points');
-    if (pointsEl) {
-      var pv = pointsEl.value ? Number(pointsEl.value) : null;
-      if (pv !== item.points) updates.points = pv;
-    }
+  if (Object.keys(updates).length === 0) {
+    showToast('No changes to save', 'success');
+    closePanel();
+    return;
+  }
+
+  var ok = await patchItem(plural, item.id, updates);
+  if (ok) { closePanel(); refreshData(); }
+}
+
+/* ── Save (Create) ───────────────────────────────────────── */
+async function saveCreatePanel() {
+  var entityType = panelState.entityType;
+  if (!entityType) return;
+
+  var fields = getEntityFields(entityType);
+  var plural = getEntityPlural(entityType);
+  var data = {};
+
+  // Title
+  var titleEl = document.getElementById('p-title');
+  if (titleEl) data.title = titleEl.value || 'Untitled';
+
+  // Fields
+  for (var name in fields) {
+    var el = document.getElementById('p-' + name);
+    if (!el) continue;
+    var val = readFieldValue(el, fields[name]);
+    if (val != null && val !== '') data[name] = val;
+  }
+
+  // Ancestors
+  var ancestors = findAncestors(entityType);
+  for (var i = 0; i < ancestors.length; i++) {
+    var ancEl = document.getElementById('p-ancestor-' + ancestors[i]);
+    if (ancEl && ancEl.value) data[ancestors[i]] = ancEl.value;
+  }
+
+  // Content
+  if (panelState.editor) {
+    var content = await getEditorMarkdown(panelState.editor);
+    if (content) data.content = content;
+  }
+
+  var result = await createItem(plural, data);
+  if (result) { closePanel(); refreshData(); }
+}
+
+function readFieldValue(el, fieldDef) {
+  switch (fieldDef.type) {
+    case 'number':
+      return el.value ? Number(el.value) : null;
+    case 'list':
+      return el.value.trim() || null;
+    case 'date':
+      return el.value || null;
+    case 'longtext':
+      return el.value || '';
+    case 'enum':
+    case 'string':
+    case 'text':
+    default:
+      return el.value;
+  }
+}
+
+// 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();
+});
+
+
+/* ══════════════════════════════════════════════════════════════
+   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');
+  if (!iconEl || !textEl) return;
+
+  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() {};
+}
+
+function buildSourceRail() {
+  var rail = document.getElementById('source-rail');
+  if (!rail) return;
+  rail.innerHTML = '';
+
+  if (hasWorkspace()) {
+    var wsSources = D.config.workspace.sources;
+    for (var i = 0; i < wsSources.length; i++) {
+      var s = wsSources[i];
+      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);
+    }
+  }
+
+  // Add source button — always visible
+  var addBtn = document.createElement('div');
+  addBtn.className = 'rail-icon rail-add';
+  addBtn.setAttribute('data-tooltip', 'Add source');
+  addBtn.textContent = '+';
+  addBtn.onclick = function() { openAddSourceModal(); };
+  rail.appendChild(addBtn);
+
+  // Switch project icon — always visible
+  var switchDivider = document.createElement('div');
+  switchDivider.className = 'rail-divider';
+  switchDivider.style.marginTop = 'auto';
+  rail.appendChild(switchDivider);
+
+  var settingsIcon = document.createElement('div');
+  settingsIcon.className = 'rail-icon rail-switch';
+  settingsIcon.setAttribute('data-tooltip', 'Settings');
+  settingsIcon.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>';
+  settingsIcon.onclick = function() { openSettings(); };
+  rail.appendChild(settingsIcon);
+
+  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);
+}
 
-    var assignedEl = document.getElementById('p-assigned');
-    if (assignedEl) {
-      var av = assignedEl.value.trim();
-      var origAssigned = Array.isArray(item.assigned) ? item.assigned.join(', ') : (item.assigned || '');
-      if (av !== origAssigned) updates.assigned = av || null;
-    }
+function switchSource(sourceName) {
+  if (sourceName === D.activeSource) return;
 
-    var sprintEl = document.getElementById('p-sprint');
-    if (sprintEl && sprintEl.value !== (item.sprint || '')) updates.sprint = sprintEl.value || null;
-  }
+  D.activeSource = sourceName;
+  D.loaded = false;
 
-  if (t === 'milestones') {
-    var deadlineEl = document.getElementById('p-deadline');
-    if (deadlineEl && deadlineEl.value !== fmtDate(item.deadline)) updates.deadline = deadlineEl.value || null;
-  }
+  try { localStorage.setItem('mdboard-source', sourceName); } catch(e) {}
 
-  if (panelState.editor) {
-    var newContent = await getEditorMarkdown(panelState.editor);
-    if (newContent !== (item.content || '')) updates.content = newContent;
-  }
+  document.querySelectorAll('.rail-icon').forEach(function(el) {
+    el.classList.toggle('active', el.dataset.source === sourceName);
+  });
 
-  // 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;
-    }
-  }
+  loadAll().then(function() {
+    generateDynamicStyles();
+    renderCurrentView();
+    buildSourceRail();
+  });
+}
 
-  if (Object.keys(updates).length === 0) {
-    showToast('No changes to save', 'success');
-    closePanel();
-    return;
-  }
+/* ── Add Source Modal ────────────────────────────────────── */
+var _addSourceState = { type: 'local', color: '#5B6EF5' };
+var _addSourceColors = ['#F97316','#8B5CF6','#EC4899','#10B981','#06B6D4','#5B6EF5','#6366F1','#D4A72C'];
 
-  var ok = await patchItem(t, item.id, updates);
-  if (ok) {
-    closePanel();
-    refreshData();
-  }
+function openAddSourceModal() {
+  _addSourceState = { type: 'local', color: '#5B6EF5' };
+  renderAddSourceModal();
+  var overlay = document.getElementById('addsource-overlay');
+  var modal = document.getElementById('addsource-modal');
+  if (overlay) { overlay.classList.add('open'); overlay.onclick = closeAddSourceModal; }
+  if (modal) modal.classList.add('open');
 }
 
-async function saveCreatePanel() {
-  var t = panelState.type;
-  if (!t) return;
-
-  var data = {};
+function closeAddSourceModal() {
+  var overlay = document.getElementById('addsource-overlay');
+  var modal = document.getElementById('addsource-modal');
+  if (overlay) overlay.classList.remove('open');
+  if (modal) modal.classList.remove('open');
+}
 
-  var titleEl = document.getElementById('p-title');
-  if (titleEl) data.title = titleEl.value || 'Untitled';
+function renderAddSourceModal() {
+  var modal = document.getElementById('addsource-modal');
+  if (!modal) return;
+  var st = _addSourceState;
+  var isLocal = st.type === 'local';
+
+  var html = '<div class="addsource-header"><h2>Add Source</h2>'
+    + '<button class="panel-close" id="addsource-close">&times;</button></div>'
+    + '<div class="addsource-body">'
+    + '<div class="addsource-type-toggle">'
+    + '<button class="addsource-type-btn' + (isLocal ? ' active' : '') + '" data-type="local">Local Folder</button>'
+    + '<button class="addsource-type-btn' + (!isLocal ? ' active' : '') + '" data-type="remote">Remote Repo</button>'
+    + '</div>'
+    + '<div class="addsource-error" id="addsource-error"></div>';
+
+  // Name field
+  html += '<div class="addsource-field"><label>Name</label>'
+    + '<input type="text" id="addsource-name" placeholder="e.g. my-project" value=""></div>';
+
+  if (isLocal) {
+    // Path input
+    html += '<div class="addsource-field"><label>Path</label>'
+      + '<input type="text" id="addsource-path" placeholder="/absolute/path/to/folder" value=""></div>';
+  } else {
+    // URL
+    html += '<div class="addsource-field"><label>URL</label>'
+      + '<input type="text" id="addsource-url" placeholder="https://github.com/user/repo.git" value=""></div>';
+    // Branch
+    html += '<div class="addsource-field"><label>Branch</label>'
+      + '<input type="text" id="addsource-branch" placeholder="main" value="main"></div>';
+  }
+
+  // Root
+  html += '<div class="addsource-field"><label>Root directory</label>'
+    + '<input type="text" id="addsource-root" placeholder="project" value="project"></div>';
+
+  // Color picker
+  html += '<div class="addsource-field"><label>Color</label><div class="addsource-colors">';
+  for (var i = 0; i < _addSourceColors.length; i++) {
+    var c = _addSourceColors[i];
+    html += '<div class="addsource-color' + (c === st.color ? ' active' : '') + '" data-color="' + c + '" style="background:' + c + '"></div>';
+  }
+  html += '</div></div>';
+
+  html += '</div>'; // close body
+  html += '<div class="addsource-footer">'
+    + '<button class="btn" id="addsource-cancel">Cancel</button>'
+    + '<button class="btn btn-primary" id="addsource-submit">Add Source</button>'
+    + '</div>';
+
+  modal.innerHTML = html;
+
+  // Bind events
+  document.getElementById('addsource-close').onclick = closeAddSourceModal;
+  document.getElementById('addsource-cancel').onclick = closeAddSourceModal;
+  document.getElementById('addsource-submit').onclick = submitAddSource;
+
+  // Type toggle
+  modal.querySelectorAll('.addsource-type-btn').forEach(function(btn) {
+    btn.onclick = function() {
+      _addSourceState.type = btn.dataset.type;
+      renderAddSourceModal();
+    };
+  });
 
-  var statusEl = document.getElementById('p-status');
-  if (statusEl) data.status = statusEl.value;
+  // Color picker
+  modal.querySelectorAll('.addsource-color').forEach(function(swatch) {
+    swatch.onclick = function() {
+      _addSourceState.color = swatch.dataset.color;
+      modal.querySelectorAll('.addsource-color').forEach(function(s) { s.classList.remove('active'); });
+      swatch.classList.add('active');
+    };
+  });
 
-  if (t === 'tasks' || t === 'epics') {
-    var priorityEl = document.getElementById('p-priority');
-    if (priorityEl && priorityEl.value) data.priority = priorityEl.value;
+  // Auto-name from path/url
+  var nameInput = document.getElementById('addsource-name');
+  if (isLocal) {
+    var pathInput = document.getElementById('addsource-path');
+    if (pathInput) pathInput.addEventListener('input', function() {
+      if (!nameInput.dataset.manual) {
+        var parts = pathInput.value.replace(/\/+$/, '').split('/');
+        nameInput.value = parts[parts.length - 1] || '';
+      }
+    });
+  } else {
+    var urlInput = document.getElementById('addsource-url');
+    if (urlInput) urlInput.addEventListener('input', function() {
+      if (!nameInput.dataset.manual) {
+        var val = urlInput.value.replace(/\.git$/, '').replace(/\/+$/, '');
+        var parts = val.split('/');
+        nameInput.value = parts[parts.length - 1] || '';
+      }
+    });
   }
+  if (nameInput) nameInput.addEventListener('input', function() {
+    nameInput.dataset.manual = nameInput.value ? '1' : '';
+  });
+}
 
-  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();
+function submitAddSource() {
+  var errEl = document.getElementById('addsource-error');
+  if (errEl) { errEl.textContent = ''; errEl.classList.remove('visible'); }
 
-    var sprintEl = document.getElementById('p-sprint');
-    if (sprintEl && sprintEl.value) data.sprint = sprintEl.value;
+  var name = (document.getElementById('addsource-name') || {}).value || '';
+  var root = (document.getElementById('addsource-root') || {}).value || '';
+  var isLocal = _addSourceState.type === 'local';
 
-    var milestoneEl = document.getElementById('p-milestone');
-    if (milestoneEl) data.milestone = milestoneEl.value;
+  var body = { name: name.trim(), type: _addSourceState.type, color: _addSourceState.color };
+  if (root.trim()) body.root = root.trim();
 
-    var epicEl = document.getElementById('p-epic-select');
-    if (epicEl) data.epic = epicEl.value;
+  if (isLocal) {
+    body.path = ((document.getElementById('addsource-path') || {}).value || '').trim();
+  } else {
+    body.url = ((document.getElementById('addsource-url') || {}).value || '').trim();
+    body.branch = ((document.getElementById('addsource-branch') || {}).value || 'main').trim();
   }
 
-  if (t === 'epics' || t === 'milestones') {
-    var milestoneEl = document.getElementById('p-milestone');
-    if (milestoneEl) data.milestone = milestoneEl.value;
-  }
+  if (!body.name) return showAddSourceError('Name is required');
+  if (isLocal && !body.path) return showAddSourceError('Path is required');
+  if (!isLocal && !body.url) return showAddSourceError('URL is required');
 
-  if (t === 'milestones') {
-    var deadlineEl = document.getElementById('p-deadline');
-    if (deadlineEl && deadlineEl.value) data.deadline = deadlineEl.value;
-  }
+  var submitBtn = document.getElementById('addsource-submit');
+  if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Adding...'; }
 
-  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);
+  fetch('/api/sources', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  }).then(function(r) { return r.json().then(function(d) { return { ok: r.ok, data: d }; }); })
+    .then(function(res) {
+      if (!res.ok) {
+        showAddSourceError(res.data.error || 'Failed to add source');
+        if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Add Source'; }
+        return;
+      }
+      closeAddSourceModal();
+      // Reload everything
+      D.loaded = false;
+      loadAll().then(function() {
+        generateDynamicStyles();
+        buildSidebar();
+        buildViews();
+        buildSourceRail();
+        if (body.name) switchSource(body.name);
+        renderSidebarLogo();
       });
-      if (vals.length > 0) aiObj[field] = vals;
+    }).catch(function(err) {
+      showAddSourceError(err.message || 'Network error');
+      if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Add Source'; }
     });
-    if (Object.keys(aiObj).length > 0) data.ai = aiObj;
-  }
+}
 
-  var result = await createItem(t, data);
-  if (result) {
-    closePanel();
-    refreshData();
-  }
+function showAddSourceError(msg) {
+  var el = document.getElementById('addsource-error');
+  if (el) { el.textContent = msg; el.classList.add('visible'); }
 }
 
-// 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();
-});
+/* ── SSE — Hot Reload ────────────────────────────────────── */
+function connectSSE() {
+  try {
+    var src = new EventSource('/api/events');
+    src.onmessage = function(e) {
+      var data;
+      try { data = JSON.parse(e.data); } catch(ex) { data = {}; }
+
+      if (data.type === 'project-changed') {
+        D.activeSource = null;
+        D.loaded = false;
+        loadAll().then(function() {
+          generateDynamicStyles();
+          buildSidebar();
+          buildViews();
+          buildSourceRail();
+          if (hasWorkspace()) {
+            var firstSrc = D.config.workspace.sources[0];
+            D.activeSource = null;
+            switchSource(firstSrc ? firstSrc.name : null);
+          } else {
+            renderCurrentView();
+          }
+          renderSidebarLogo();
+        });
+        return;
+      }
+
+      if (data.cssReload) {
+        var link = document.getElementById('custom-theme');
+        if (link) link.href = '/mdboard.css?' + Date.now();
+      }
+      refreshData();
+    };
+    src.onerror = function() { setTimeout(connectSSE, 5000); src.close(); };
+  } catch(ex) { /* no SSE support */ }
+}
 
 
 /* ══════════════════════════════════════════════════════════════
@@ -3040,7 +3381,23 @@ function renderHistoryList(entries) {
   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>';
+    body.innerHTML = '<div class="history-empty">No projects in history yet.<br>Open mdboard from a project directory to add it.</div>'
+      + '<div class="history-open-row">'
+      + '<input type="text" id="history-path-input" class="history-path-input" placeholder="/absolute/path/to/folder or https://github.com/user/repo">'
+      + '<button class="btn btn-primary btn-sm" id="history-open-btn">Open</button>'
+      + '</div>';
+    var openBtn = document.getElementById('history-open-btn');
+    var pathInput = document.getElementById('history-path-input');
+    if (openBtn && pathInput) {
+      openBtn.onclick = function() {
+        var val = pathInput.value.trim();
+        if (!val) return;
+        switchProject(val);
+      };
+      pathInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') { openBtn.click(); }
+      });
+    }
     return;
   }
 
@@ -3069,6 +3426,12 @@ function renderHistoryList(entries) {
     '</div>';
   }
 
+  // Path input for opening a new project
+  html += '<div class="history-open-row">'
+    + '<input type="text" id="history-path-input" class="history-path-input" placeholder="/absolute/path/to/folder or https://github.com/user/repo">'
+    + '<button class="btn btn-primary btn-sm" id="history-open-btn">Open</button>'
+    + '</div>';
+
   body.innerHTML = html;
 
   // Attach click handlers
@@ -3080,6 +3443,20 @@ function renderHistoryList(entries) {
       switchProject(itemPath);
     });
   }
+
+  // Open button handler
+  var openBtn = document.getElementById('history-open-btn');
+  var pathInput = document.getElementById('history-path-input');
+  if (openBtn && pathInput) {
+    openBtn.onclick = function() {
+      var val = pathInput.value.trim();
+      if (!val) return;
+      switchProject(val);
+    };
+    pathInput.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') { openBtn.click(); }
+    });
+  }
 }
 
 function switchProject(projectPath) {
@@ -3094,24 +3471,8 @@ function switchProject(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 = '';
-        }
-      });
+      // Full reload to pick up new project's config, theme, and CSS
+      window.location.reload();
       showToast('Switched to ' + (data.name || 'project'), 'success');
     } else {
       showToast('Error: ' + (data.error || 'Switch failed'), 'error');
@@ -3144,95 +3505,330 @@ function timeAgo(dateStr) {
 
 
 /* ══════════════════════════════════════════════════════════════
-   RENDER
+   APP — Dynamic sidebar, view routing, settings, init
    ══════════════════════════════════════════════════════════════ */
-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();
+
+/* ── Sidebar ─────────────────────────────────────────────── */
+function buildSidebar() {
+  var nav = document.getElementById('sidebar-nav');
+  if (!nav || !D.config || !D.config.ui || !D.config.ui.tabs) return;
+
+  var tabs = D.config.ui.tabs;
+  var html = '';
+  for (var i = 0; i < tabs.length; i++) {
+    var tab = tabs[i];
+    var icon = TAB_ICONS[tab.icon] || TAB_ICONS['board'];
+    var cls = (D.activeTab === tab.id) ? ' class="active"' : '';
+    var tooltip = tab.description ? ' title="' + escHtml(tab.description) + '"' : '';
+    html += '<a href="#' + tab.id + '" data-view="' + tab.id + '"' + cls + tooltip + '>' + icon + '<span>' + escHtml(tab.label) + '</span></a>';
   }
+  nav.innerHTML = html;
 }
 
-function renderHeader() {
-  renderSidebarLogo();
+function buildViews() {
+  var content = document.getElementById('app-content');
+  if (!content || !D.config || !D.config.ui || !D.config.ui.tabs) return;
 
-  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>';
+  var tabs = D.config.ui.tabs;
+  var html = '';
+  for (var i = 0; i < tabs.length; i++) {
+    var tab = tabs[i];
+    var cls = (D.activeTab === tab.id) ? ' active' : '';
+    html += '<div id="view-' + tab.id + '" class="view' + cls + '">';
+    html += '<div class="view-toolbar" id="toolbar-' + tab.id + '"></div>';
+    html += '<div class="view-body" id="body-' + tab.id + '"></div>';
+    html += '</div>';
+  }
+  content.innerHTML = html;
 }
 
-/* ══════════════════════════════════════════════════════════════
-   NAVIGATION
-   ══════════════════════════════════════════════════════════════ */
-function switchView(name) {
+/* ── View Switching ──────────────────────────────────────── */
+function switchView(tabId) {
+  D.activeTab = tabId;
   document.querySelectorAll('.view').forEach(function(v) { v.classList.remove('active'); });
   document.querySelectorAll('#sidebar-nav a[data-view]').forEach(function(a) { a.classList.remove('active'); });
-  var t = document.getElementById('view-' + name);
+  var t = document.getElementById('view-' + tabId);
   if (t) t.classList.add('active');
-  var l = document.querySelector('#sidebar-nav a[data-view="' + name + '"]');
+  var l = document.querySelector('#sidebar-nav a[data-view="' + tabId + '"]');
   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();
+  try { localStorage.setItem('mdboard-view', tabId); } catch(e) {}
+  if (D.loaded) renderCurrentView();
+}
+
+function cleanupNotesView() {
+  // Destroy editor if active
+  if (notesState.editor) {
+    destroyEditor(notesState.editor);
+    notesState.editor = null;
   }
-  // Trigger notes rendering when switching to it
-  if (name === 'notes' && D.loaded) {
-    renderNotes();
+  // Reset inline styles that renderNotes applies to .view elements
+  document.querySelectorAll('.view').forEach(function(v) {
+    v.style.display = '';
+    v.style.flexDirection = '';
+    v.style.margin = '';
+    v.style.height = '';
+  });
+  document.querySelectorAll('.view-body').forEach(function(b) {
+    b.style.flex = '';
+    b.style.overflow = '';
+  });
+}
+
+function renderCurrentView() {
+  if (!D.config || !D.config.ui || !D.activeTab) return;
+  var tabConfig = getTabConfig(D.activeTab);
+  if (!tabConfig) return;
+
+  var toolbarEl = document.getElementById('toolbar-' + D.activeTab);
+  var bodyEl = document.getElementById('body-' + D.activeTab);
+  if (!toolbarEl || !bodyEl) return;
+
+  var layout = getActiveLayout(D.activeTab);
+
+  // Clean up notes view styles before rendering any view
+  cleanupNotesView();
+
+  // Render toolbar: layout switcher + filters
+  renderToolbar(toolbarEl, tabConfig, layout);
+
+  // Render header
+  renderAppHeader();
+
+  // Dispatch to layout renderer
+  switch (layout) {
+    case 'board':   renderBoard(bodyEl, tabConfig); break;
+    case 'table':   renderTable(bodyEl, tabConfig); break;
+    case 'cards':   renderCards(bodyEl, tabConfig); break;
+    case 'list':    renderList(bodyEl, tabConfig); break;
+    case 'editor':  renderNotes(bodyEl, tabConfig); break;
+    case 'metrics': renderMetrics(bodyEl, tabConfig); break;
+    default:        bodyEl.innerHTML = '<div class="empty"><p>Unknown layout: ' + escHtml(layout) + '</p></div>';
   }
 }
 
-document.getElementById('sidebar-nav').addEventListener('click', function(e) {
-  var a = e.target.closest('a[data-view]');
-  if (!a) return;
-  e.preventDefault();
-  switchView(a.dataset.view);
-  window.location.hash = a.dataset.view;
-});
+function renderToolbar(container, tabConfig, activeLayout) {
+  var html = '';
 
-function handleHash() {
-  var hash = window.location.hash.replace('#', '');
-  if (!hash) {
-    try { hash = localStorage.getItem('mdboard-view') || ''; } catch(e) {}
+  // Create button
+  if (tabConfig.entity && isSourceWritable() && activeLayout !== 'editor' && activeLayout !== 'metrics') {
+    html += '<button class="btn btn-sm btn-create" id="create-btn-' + tabConfig.id + '">+ New ' + escHtml(getEntitySingular(tabConfig.entity)) + '</button>';
+  }
+
+  // Layout switcher
+  if (tabConfig.layouts && tabConfig.layouts.length > 1) {
+    html += '<div class="layout-switcher">';
+    for (var i = 0; i < tabConfig.layouts.length; i++) {
+      var l = tabConfig.layouts[i];
+      var active = l === activeLayout ? ' active' : '';
+      html += '<button class="layout-btn' + active + '" data-layout="' + l + '">' + escHtml(l.charAt(0).toUpperCase() + l.slice(1)) + '</button>';
+    }
+    html += '</div>';
+  }
+
+  // Filters
+  if (tabConfig.entity && activeLayout !== 'editor' && activeLayout !== 'metrics') {
+    html += '<input type="text" class="filter-search" data-tab="' + tabConfig.id + '" placeholder="Search..." value="' + escHtml((D.tabFilters[tabConfig.id] || {})._search || '') + '">';
+
+    var filterFields = [];
+    if (tabConfig.filters === 'auto') {
+      filterFields = getAutoFilters(tabConfig.entity);
+    } else if (Array.isArray(tabConfig.filters)) {
+      filterFields = tabConfig.filters;
+    }
+
+    var currentFilters = D.tabFilters[tabConfig.id] || {};
+    for (var fi = 0; fi < filterFields.length; fi++) {
+      var field = filterFields[fi];
+      var values = getFilterValues(tabConfig.entity, field);
+      var label = field.charAt(0).toUpperCase() + field.slice(1);
+      var ancDef = getEntityDef(field);
+      if (ancDef) label = ancDef.plural || label;
+      var fieldDef = getEntityFields(tabConfig.entity)[field];
+      if (fieldDef && fieldDef.label) label = fieldDef.label;
+
+      html += '<select class="filter-select" data-tab="' + tabConfig.id + '" data-field="' + field + '">';
+      html += '<option value="">All ' + escHtml(label) + '</option>';
+      for (var vi = 0; vi < values.length; vi++) {
+        var v = values[vi];
+        var sel = currentFilters[field] === v ? ' selected' : '';
+        html += '<option value="' + escHtml(v) + '"' + sel + '>' + escHtml(getFieldLabel(tabConfig.entity, field, v)) + '</option>';
+      }
+      html += '</select>';
+    }
+  }
+
+  container.innerHTML = html;
+
+  // Event listeners
+  var createBtn = document.getElementById('create-btn-' + tabConfig.id);
+  if (createBtn) {
+    createBtn.addEventListener('click', function() { openCreateDialog(tabConfig.entity); });
+  }
+
+  container.querySelectorAll('.layout-btn').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      D.activeLayouts[tabConfig.id] = btn.dataset.layout;
+      renderCurrentView();
+    });
+  });
+
+  var searchInput = container.querySelector('.filter-search[data-tab="' + tabConfig.id + '"]');
+  if (searchInput) {
+    searchInput.addEventListener('input', function() {
+      if (!D.tabFilters[tabConfig.id]) D.tabFilters[tabConfig.id] = {};
+      D.tabFilters[tabConfig.id]._search = searchInput.value;
+      renderCurrentView();
+    });
   }
-  hash = hash || 'board';
-  var valid = ['board','table','milestones','metrics','overview','notes'];
-  switchView(valid.indexOf(hash) !== -1 ? hash : 'board');
+
+  container.querySelectorAll('.filter-select').forEach(function(sel) {
+    sel.addEventListener('change', function() {
+      var tabId = sel.dataset.tab;
+      var field = sel.dataset.field;
+      if (!D.tabFilters[tabId]) D.tabFilters[tabId] = {};
+      D.tabFilters[tabId][field] = sel.value;
+      renderCurrentView();
+    });
+  });
 }
-window.addEventListener('hashchange', handleHash);
 
-/* ══════════════════════════════════════════════════════════════
-   SETTINGS PANEL
-   ══════════════════════════════════════════════════════════════ */
+/* ── Header ──────────────────────────────────────────────── */
+function renderAppHeader() {
+  var header = document.getElementById('app-header');
+  if (!header || !D.loaded) return;
+
+  renderSidebarLogo();
+
+  if (!D.config || !D.config.entities) { header.innerHTML = ''; return; }
+
+  // Find the leaf entity type for stats
+  var leafType = null;
+  var hierarchy = D.config.hierarchy || {};
+  function findLeaf(node) {
+    for (var t in node) {
+      if (node[t].children) findLeaf(node[t].children);
+      else leafType = t;
+    }
+  }
+  findLeaf(hierarchy);
+
+  if (!leafType) { header.innerHTML = ''; return; }
+
+  var items = getEntities(leafType);
+  var total = items.length;
+  var done = items.filter(function(i) { return isCompletedStatus(i.status); }).length;
+  var inProg = items.filter(function(i) {
+    return i.status && !isCompletedStatus(i.status) && i.status !== 'todo' && i.status !== 'planned';
+  }).length;
+  var vel = total > 0 ? Math.round(done / total * 100) : 0;
+
+  var leafPlural = getEntityDef(leafType) ? getEntityDef(leafType).plural : 'Items';
+
+  header.innerHTML =
+    '<div class="global-search-wrap" id="global-search-wrap">' +
+      '<svg class="global-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>' +
+      '<input type="text" class="global-search-input" id="global-search" placeholder="Search everything... (Ctrl+K)" autocomplete="off">' +
+      '<div class="global-search-results" id="global-search-results"></div>' +
+    '</div>' +
+    '<div id="h-stats" style="display:flex;gap:20px;margin-left:auto">' +
+      '<div class="stat"><span class="stat-val">' + total + '</span><span class="stat-label">' + escHtml(leafPlural) + '</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">Active</span></div>' +
+      '<div class="stat"><span class="stat-val" style="color:var(--accent)">' + vel + '%</span><span class="stat-label">Progress</span></div>' +
+    '</div>';
+
+  var searchInput = document.getElementById('global-search');
+  if (searchInput && !searchInput._bound) {
+    searchInput._bound = true;
+    searchInput.addEventListener('input', function() { globalSearch(searchInput.value); });
+    searchInput.addEventListener('focus', function() { if (searchInput.value) globalSearch(searchInput.value); });
+    searchInput.addEventListener('keydown', function(e) {
+      var results = document.getElementById('global-search-results');
+      var items = results ? results.querySelectorAll('.gs-item') : [];
+      var active = results ? results.querySelector('.gs-item.active') : null;
+      var idx = active ? Array.prototype.indexOf.call(items, active) : -1;
+      if (e.key === 'ArrowDown') { e.preventDefault(); selectGsItem(items, idx + 1); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); selectGsItem(items, idx - 1); }
+      else if (e.key === 'Enter' && active) { e.preventDefault(); active.click(); }
+      else if (e.key === 'Escape') { searchInput.blur(); closeGlobalSearch(); }
+    });
+    document.addEventListener('click', function(e) {
+      if (!e.target.closest('#global-search-wrap')) closeGlobalSearch();
+    });
+  }
+}
+
+function selectGsItem(items, idx) {
+  if (!items.length) return;
+  items.forEach(function(el) { el.classList.remove('active'); });
+  if (idx < 0) idx = items.length - 1;
+  if (idx >= items.length) idx = 0;
+  items[idx].classList.add('active');
+  items[idx].scrollIntoView({ block: 'nearest' });
+}
+
+function globalSearch(query) {
+  var results = document.getElementById('global-search-results');
+  if (!results) return;
+  if (!query || query.length < 2) { results.innerHTML = ''; results.style.display = 'none'; return; }
+
+  var q = query.toLowerCase();
+  var matches = [];
+  var types = D.config && D.config.entities ? Object.keys(D.config.entities) : [];
+
+  for (var ti = 0; ti < types.length; ti++) {
+    var type = types[ti];
+    var items = getEntities(type);
+    for (var i = 0; i < items.length; i++) {
+      var item = items[i];
+      var idMatch = (item.id || '').toLowerCase().indexOf(q) !== -1;
+      var titleMatch = (item.title || '').toLowerCase().indexOf(q) !== -1;
+      if (idMatch || titleMatch) {
+        matches.push({ type: type, item: item });
+        if (matches.length >= 12) break;
+      }
+    }
+    if (matches.length >= 12) break;
+  }
+
+  if (matches.length === 0) {
+    results.innerHTML = '<div class="gs-empty">No results</div>';
+    results.style.display = 'block';
+    return;
+  }
+
+  var html = '';
+  for (var mi = 0; mi < matches.length; mi++) {
+    var m = matches[mi];
+    var def = getEntityDef(m.type);
+    var label = def ? def.singular : m.type;
+    html += '<div class="gs-item" data-type="' + escHtml(m.type) + '" data-id="' + escHtml(m.item.id) + '">' +
+      statusIcon(m.type, m.item.status) +
+      '<span class="gs-title">' + escHtml(m.item.title || m.item.id) + '</span>' +
+      '<span class="gs-meta">' + escHtml(m.item.id) + '</span>' +
+      '<span class="gs-type">' + escHtml(label) + '</span>' +
+    '</div>';
+  }
+  results.innerHTML = html;
+  results.style.display = 'block';
+
+  results.querySelectorAll('.gs-item').forEach(function(el) {
+    el.addEventListener('click', function() {
+      var type = el.dataset.type;
+      var item = getEntities(type).find(function(i) { return i.id === el.dataset.id; });
+      if (item) openPanel(type, item);
+      closeGlobalSearch();
+      document.getElementById('global-search').value = '';
+    });
+  });
+}
+
+function closeGlobalSearch() {
+  var results = document.getElementById('global-search-results');
+  if (results) { results.innerHTML = ''; results.style.display = 'none'; }
+}
+
+/* ── Settings ────────────────────────────────────────────── */
 var _settingsState = { selectedTheme: null, originalTheme: null };
 
 function openSettings() {
@@ -3291,10 +3887,7 @@ function renderThemeGrid() {
 
 function saveTheme() {
   var themeId = _settingsState.selectedTheme;
-  if (!themeId) {
-    closeSettings();
-    return;
-  }
+  if (!themeId) { closeSettings(); return; }
   var toggle = document.getElementById('theme-default-toggle');
   var setDefault = toggle ? toggle.checked : false;
   var css = generateThemeCss(themeId);
@@ -3305,10 +3898,10 @@ function saveTheme() {
     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.originalTheme = themeId;
       _settingsState.selectedTheme = null;
+      applyTheme(themeId);
       showToast('Theme saved: ' + (THEMES[themeId] ? THEMES[themeId].name : themeId), 'success');
       closeSettings();
     } else {
@@ -3319,96 +3912,85 @@ function saveTheme() {
   });
 }
 
-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);
+  _settingsState.selectedTheme = card.dataset.theme;
+  applyTheme(card.dataset.theme);
   renderThemeGrid();
 });
-
 document.getElementById('settings-save').addEventListener('click', saveTheme);
 
+/* ── Navigation ──────────────────────────────────────────── */
+document.getElementById('sidebar-nav').addEventListener('click', function(e) {
+  var a = e.target.closest('a[data-view]');
+  if (!a) return;
+  e.preventDefault();
+  switchView(a.dataset.view);
+  window.location.hash = a.dataset.view;
+});
+
+function handleHash() {
+  var hash = window.location.hash.replace('#', '');
+  if (!hash) {
+    try { hash = localStorage.getItem('mdboard-view') || ''; } catch(e) {}
+  }
+  if (!hash && D.config && D.config.ui && D.config.ui.tabs && D.config.ui.tabs.length > 0) {
+    hash = D.config.ui.tabs[0].id;
+  }
+  return hash || 'tasks';
+}
+window.addEventListener('hashchange', function() { switchView(handleHash()); });
+
 /* ══════════════════════════════════════════════════════════════
    INIT
    ══════════════════════════════════════════════════════════════ */
 (async function() {
-  handleHash();
   await loadAll();
-  initFromConfig();
+  generateDynamicStyles();
+
+  // Determine initial tab
+  D.activeTab = handleHash();
 
-  // Sidebar logo always shows project name
+  // Build dynamic UI
+  buildSidebar();
+  buildViews();
   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);
-      }
-    }
+  // Always build the source rail (switch project button)
+  buildSourceRail();
 
-    // Restore last source or default to overview
+  // Workspace source switching
+  if (hasWorkspace()) {
     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';
+    var validSource = savedSource &&
+      D.config.workspace.sources.some(function(s) { return s.name === savedSource; });
+    var initialSource = validSource ? savedSource : D.config.workspace.sources[0].name;
 
-    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();
+    generateDynamicStyles();
   }
 
-  renderAll();
+  // Initial render
+  switchView(D.activeTab);
   connectSSE();
-
-  // Auto-open history modal if no project
   checkAutoOpenHistory();
 
-  // Keyboard shortcut: Ctrl/Cmd+K to open history modal
+  // Keyboard shortcuts
   document.addEventListener('keydown', function(e) {
     if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
       e.preventDefault();
-      openHistoryModal();
+      var search = document.getElementById('global-search');
+      if (search) { search.focus(); search.select(); }
     }
   });
-
-  // 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>
 </html>