mdboard 1.2.0 → 1.3.0

package/index.html

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