@yemi33/minions 0.1.2195 → 0.1.2196

package/dashboard/slim/js/knowledge.js

@@ -0,0 +1,576 @@
+
+  // ── Knowledge control panel (Pinned Context + Notes + KB) ──────────
+  // One unified cockpit box over the three knowledge surfaces, replacing the
+  // old single "Pinned context" tile. Reuses the classic dashboard's existing
+  // endpoints (no new server routes):
+  //   Pinned — /api/pinned (+ update/remove); the Pinned-Context tab reuses the
+  //            editor + list renderer in pinned.js.
+  //   Notes  — /api/notes-full (read notes.md), /api/notes-save (edit notes.md),
+  //            /api/notes (add an inbox note for consolidation).
+  //   KB     — /api/knowledge (list), /api/knowledge/:cat/:file (read entry),
+  //            /api/knowledge POST (create), /api/kb-pins(+/toggle) (pin state).
+  //
+  // Counts: pinned is live from the 5s status poll (renderKnowledgeTile is fed
+  // by applyStatus). Notes + KB counts are fetched lazily — once shortly after
+  // load and again after any create/save — so the heavier /api/notes-full and
+  // /api/knowledge reads stay off the recurring poll.
+
+  var _knowledgeCounts = { pinned: 0, notes: null, kb: null };
+  var _knActiveTab = 'pinned';
+  var _kbData = null;      // cached /api/knowledge payload
+  var _kbPins = [];        // cached pinned KB keys ('knowledge/<cat>/<file>')
+
+  var KB_CAT_LABELS = {
+    architecture: 'Architecture', conventions: 'Conventions',
+    'project-notes': 'Project Notes', 'build-reports': 'Build Reports',
+    reviews: 'Reviews', learnings: 'Learnings', decisions: 'Decisions',
+    incidents: 'Incidents', 'api-notes': 'API Notes',
+  };
+  // Categories offered in the KB create form (mirrors the classic dashboard).
+  var KB_CREATE_CATS = ['architecture', 'conventions', 'project-notes', 'build-reports', 'reviews'];
+  var KB_LIST_CAP = 60;    // cap rendered rows; the KB can hold thousands
+
+  // ── Cockpit tile ───────────────────────────────────────────────────
+  // Called from applyStatus with the live pinned count each poll, and from the
+  // lazy count loader (no arg) to repaint when notes/KB counts arrive.
+  function renderKnowledgeTile(pinnedCount) {
+    if (typeof pinnedCount === 'number') _knowledgeCounts.pinned = pinnedCount;
+    var p = _knowledgeCounts.pinned || 0;
+    var n = _knowledgeCounts.notes;
+    var k = _knowledgeCounts.kb;
+    var total = p + (n || 0) + (k || 0);
+    var detail = p + ' pinned · ' + (n == null ? '…' : n) + ' notes · ' + (k == null ? '…' : k) + ' KB';
+    updateTile('knowledge', total, detail, total ? 'blue' : null);
+  }
+
+  function _countNotesEntries(text) {
+    if (!text || text === 'No notes file found.') return 0;
+    var m = text.match(/^###\s/gm);
+    return m ? m.length : 0;
+  }
+
+  function _countKbEntries(data) {
+    if (!data || typeof data !== 'object') return 0;
+    var total = 0;
+    Object.keys(data).forEach(function(k) {
+      if (Array.isArray(data[k])) total += data[k].length;
+    });
+    return total;
+  }
+
+  // Best-effort lazy fetch of the notes + KB counts. Failures leave the cached
+  // value untouched so a transient error doesn't blank the tile detail.
+  async function loadKnowledgeCounts() {
+    try {
+      var res = await fetch('/api/notes-full', { headers: { 'Accept': 'text/plain' } });
+      if (res.ok) _knowledgeCounts.notes = _countNotesEntries(await res.text());
+    } catch (e) { /* keep last-known */ }
+    try {
+      var kres = await fetch('/api/knowledge', { headers: { 'Accept': 'application/json' } });
+      if (kres.ok) {
+        _kbData = await kres.json();
+        _knowledgeCounts.kb = _countKbEntries(_kbData);
+      }
+    } catch (e) { /* keep last-known */ }
+    renderKnowledgeTile();
+  }
+
+  async function loadKbPins() {
+    try {
+      var res = await fetch('/api/kb-pins', { headers: { 'Accept': 'application/json' } });
+      if (!res.ok) return;
+      var d = await res.json();
+      _kbPins = Array.isArray(d.pins) ? d.pins : [];
+    } catch (e) { _kbPins = _kbPins || []; }
+  }
+
+  function kbPinKey(cat, file) { return 'knowledge/' + cat + '/' + file; }
+  function isKbPinned(key) { return _kbPins.indexOf(key) !== -1; }
+
+  // ── Modal open/close + tab switching ───────────────────────────────
+  function openKnowledgeModal() {
+    var modal = document.getElementById('slim-knowledge-modal');
+    if (!modal) return;
+    renderKnowledgeTab();
+    modal.classList.add('open');
+  }
+  function closeKnowledgeModal() {
+    var modal = document.getElementById('slim-knowledge-modal');
+    if (modal) modal.classList.remove('open');
+  }
+  function setKnowledgeTab(tab) {
+    _knActiveTab = tab;
+    var tabs = document.querySelectorAll('#slim-kn-tabs .kn-tab');
+    var activeTabId = null;
+    for (var i = 0; i < tabs.length; i++) {
+      var isActive = tabs[i].getAttribute('data-kn-tab') === tab;
+      tabs[i].classList.toggle('active', isActive);
+      tabs[i].setAttribute('aria-selected', isActive ? 'true' : 'false');
+      if (isActive) activeTabId = tabs[i].id;
+    }
+    var body = document.getElementById('slim-knowledge-body');
+    if (body && activeTabId) body.setAttribute('aria-labelledby', activeTabId);
+    renderKnowledgeTab();
+  }
+  function renderKnowledgeTab() {
+    var body = document.getElementById('slim-knowledge-body');
+    if (!body) return;
+    body.textContent = '';
+    if (_knActiveTab === 'notes') renderKnowledgeNotesTab(body);
+    else if (_knActiveTab === 'kb') renderKnowledgeKbTab(body);
+    else renderKnowledgePinnedTab(body);
+  }
+
+  // ── Tab: Pinned Context ────────────────────────────────────────────
+  function renderKnowledgePinnedTab(body) {
+    var intro = document.createElement('p');
+    intro.textContent = 'Context all agents see, prepended to every prompt as “read first”.';
+    body.appendChild(intro);
+
+    var toolbar = document.createElement('div');
+    toolbar.className = 'kn-toolbar';
+    var addBtn = document.createElement('button');
+    addBtn.className = 'linkpr-chip';
+    addBtn.type = 'button';
+    addBtn.textContent = '+ Pin content';
+    addBtn.addEventListener('click', function() { openSlimPinEditor(null); });
+    toolbar.appendChild(addBtn);
+    body.appendChild(toolbar);
+
+    var list = document.createElement('div');
+    list.id = 'slim-pinned-list';
+    body.appendChild(list);
+    renderSlimPinnedList();   // defined in pinned.js; renders into #slim-pinned-list
+  }
+
+  // ── Tab: Notes ─────────────────────────────────────────────────────
+  function renderKnowledgeNotesTab(body) {
+    var intro = document.createElement('p');
+    intro.textContent = 'Consolidated team notes (notes.md). Edit and save, or add a note for the next consolidation sweep.';
+    body.appendChild(intro);
+
+    var msg = document.createElement('div');
+    msg.id = 'slim-notes-msg';
+    msg.className = 'kn-msg';
+    body.appendChild(msg);
+
+    var ta = document.createElement('textarea');
+    ta.id = 'slim-notes-content';
+    ta.className = 'linkpr-input kn-notes-textarea';
+    ta.rows = 12;
+    ta.value = 'Loading notes…';
+    ta.disabled = true;
+    body.appendChild(ta);
+
+    var saveRow = document.createElement('div');
+    saveRow.className = 'kn-toolbar kn-toolbar-end';
+    var saveBtn = document.createElement('button');
+    saveBtn.className = 'btn-primary';
+    saveBtn.type = 'button';
+    saveBtn.textContent = 'Save notes.md';
+    saveBtn.disabled = true;
+    saveBtn.addEventListener('click', saveKnowledgeNotes);
+    saveRow.appendChild(saveBtn);
+    body.appendChild(saveRow);
+
+    // Add-a-note (inbox) sub-form.
+    var addHead = document.createElement('div');
+    addHead.className = 'kn-section-head';
+    addHead.textContent = 'Add a note for consolidation';
+    body.appendChild(addHead);
+
+    var titleLabel = document.createElement('label');
+    titleLabel.className = 'linkpr-label';
+    titleLabel.textContent = 'Title';
+    var titleInput = document.createElement('input');
+    titleInput.id = 'slim-note-title';
+    titleInput.className = 'linkpr-input';
+    titleInput.type = 'text';
+    titleInput.placeholder = 'Short summary';
+    titleLabel.appendChild(titleInput);
+    body.appendChild(titleLabel);
+
+    var whatLabel = document.createElement('label');
+    whatLabel.className = 'linkpr-label';
+    whatLabel.textContent = 'Note';
+    var whatInput = document.createElement('textarea');
+    whatInput.id = 'slim-note-what';
+    whatInput.className = 'linkpr-input';
+    whatInput.rows = 3;
+    whatInput.placeholder = 'What did you learn / decide?';
+    whatLabel.appendChild(whatInput);
+    body.appendChild(whatLabel);
+
+    var addRow = document.createElement('div');
+    addRow.className = 'kn-toolbar kn-toolbar-end';
+    var addNoteMsg = document.createElement('span');
+    addNoteMsg.id = 'slim-note-msg';
+    addNoteMsg.className = 'kn-msg kn-msg-inline';
+    addRow.appendChild(addNoteMsg);
+    var addNoteBtn = document.createElement('button');
+    addNoteBtn.className = 'btn-secondary';
+    addNoteBtn.type = 'button';
+    addNoteBtn.textContent = 'Add note';
+    addNoteBtn.addEventListener('click', submitKnowledgeNote);
+    addRow.appendChild(addNoteBtn);
+    body.appendChild(addRow);
+
+    // Load notes.md into the textarea.
+    fetch('/api/notes-full', { headers: { 'Accept': 'text/plain' } })
+      .then(function(r) { return r.ok ? r.text() : Promise.reject(new Error('HTTP ' + r.status)); })
+      .then(function(text) {
+        if (document.getElementById('slim-notes-content') !== ta) return;  // tab switched away
+        ta.value = (text === 'No notes file found.') ? '' : text;
+        ta.disabled = false;
+        saveBtn.disabled = false;
+        _knowledgeCounts.notes = _countNotesEntries(text);
+        renderKnowledgeTile();
+      })
+      .catch(function(e) {
+        ta.value = '';
+        ta.disabled = false;
+        saveBtn.disabled = false;
+        if (msg) { msg.style.color = 'var(--red)'; msg.textContent = 'Could not load notes: ' + (e.message || e); }
+      });
+  }
+
+  async function saveKnowledgeNotes() {
+    var ta = document.getElementById('slim-notes-content');
+    var msg = document.getElementById('slim-notes-msg');
+    if (!ta) return;
+    if (msg) { msg.style.color = 'var(--muted)'; msg.textContent = 'Saving…'; }
+    try {
+      var res = await fetch('/api/notes-save', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: ta.value, file: 'notes.md' }),
+      });
+      var d = await res.json().catch(function() { return {}; });
+      if (!res.ok) throw new Error(d.error || ('HTTP ' + res.status));
+      if (msg) { msg.style.color = 'var(--green)'; msg.textContent = 'Saved.'; }
+      _knowledgeCounts.notes = _countNotesEntries(ta.value);
+      renderKnowledgeTile();
+    } catch (e) {
+      if (msg) { msg.style.color = 'var(--red)'; msg.textContent = 'Error: ' + (e && e.message ? e.message : 'failed'); }
+    }
+  }
+
+  async function submitKnowledgeNote() {
+    var titleEl = document.getElementById('slim-note-title');
+    var whatEl = document.getElementById('slim-note-what');
+    var msg = document.getElementById('slim-note-msg');
+    var title = titleEl ? (titleEl.value || '').trim() : '';
+    var what = whatEl ? (whatEl.value || '').trim() : '';
+    if (!title) {
+      if (msg) { msg.style.color = 'var(--red)'; msg.textContent = 'Title is required.'; }
+      return;
+    }
+    if (msg) { msg.style.color = 'var(--muted)'; msg.textContent = 'Adding…'; }
+    try {
+      var res = await fetch('/api/notes', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title: title, what: what }),
+      });
+      var d = await res.json().catch(function() { return {}; });
+      if (!res.ok) throw new Error(d.error || ('HTTP ' + res.status));
+      if (titleEl) titleEl.value = '';
+      if (whatEl) whatEl.value = '';
+      if (msg) { msg.style.color = 'var(--green)'; msg.textContent = 'Note added for consolidation.'; }
+    } catch (e) {
+      if (msg) { msg.style.color = 'var(--red)'; msg.textContent = 'Error: ' + (e && e.message ? e.message : 'failed'); }
+    }
+  }
+
+  // ── Tab: KB ────────────────────────────────────────────────────────
+  function renderKnowledgeKbTab(body) {
+    var intro = document.createElement('p');
+    intro.textContent = 'Knowledge base — categorized entries written by consolidation. Click an entry to read it.';
+    body.appendChild(intro);
+
+    var toolbar = document.createElement('div');
+    toolbar.className = 'kn-toolbar';
+    var newBtn = document.createElement('button');
+    newBtn.className = 'linkpr-chip';
+    newBtn.type = 'button';
+    newBtn.textContent = '+ New entry';
+    newBtn.addEventListener('click', function() { toggleKbCreateForm(body); });
+    toolbar.appendChild(newBtn);
+    body.appendChild(toolbar);
+
+    var listMsg = document.createElement('div');
+    listMsg.id = 'slim-kb-list-msg';
+    listMsg.className = 'kn-msg';
+    body.appendChild(listMsg);
+
+    var listWrap = document.createElement('div');
+    listWrap.id = 'slim-kb-list';
+    body.appendChild(listWrap);
+
+    if (_kbData) renderKbList(listWrap);
+    else {
+      var loading = document.createElement('div');
+      loading.className = 'tile-empty';
+      loading.textContent = 'Loading knowledge base…';
+      listWrap.appendChild(loading);
+    }
+    // Always refresh list + pins on open so newly-swept entries appear.
+    Promise.all([
+      fetch('/api/knowledge', { headers: { 'Accept': 'application/json' } }).then(function(r) { return r.ok ? r.json() : null; }).catch(function() { return null; }),
+      loadKbPins(),
+    ]).then(function(results) {
+      if (results[0]) {
+        _kbData = results[0];
+        _knowledgeCounts.kb = _countKbEntries(_kbData);
+        renderKnowledgeTile();
+      }
+      if (_knActiveTab === 'kb') {
+        var lw = document.getElementById('slim-kb-list');
+        if (lw) renderKbList(lw);
+      }
+    });
+  }
+
+  function _kbAllItems() {
+    var items = [];
+    if (!_kbData) return items;
+    Object.keys(_kbData).forEach(function(cat) {
+      if (!Array.isArray(_kbData[cat])) return;
+      _kbData[cat].forEach(function(item) {
+        items.push({ file: item.file, category: cat, title: item.title, agent: item.agent, date: item.date, sortTs: item.sortTs, preview: item.preview });
+      });
+    });
+    return items;
+  }
+
+  function renderKbList(listWrap) {
+    listWrap.textContent = '';
+    var items = _kbAllItems();
+    if (!items.length) {
+      var empty = document.createElement('div');
+      empty.className = 'tile-empty';
+      empty.textContent = 'No knowledge entries yet. Notes are classified here after consolidation.';
+      listWrap.appendChild(empty);
+      return;
+    }
+    // Pinned first, then newest.
+    items.sort(function(a, b) {
+      var ap = isKbPinned(kbPinKey(a.category, a.file));
+      var bp = isKbPinned(kbPinKey(b.category, b.file));
+      if (ap !== bp) return ap ? -1 : 1;
+      return (b.sortTs || 0) - (a.sortTs || 0) || (b.date || '').localeCompare(a.date || '');
+    });
+    var shown = items.slice(0, KB_LIST_CAP);
+    shown.forEach(function(item) {
+      listWrap.appendChild(buildKbRow(item));
+    });
+    if (items.length > shown.length) {
+      var more = document.createElement('div');
+      more.className = 'tile-empty';
+      more.textContent = 'Showing ' + shown.length + ' of ' + items.length + ' entries (newest + pinned first).';
+      listWrap.appendChild(more);
+    }
+  }
+
+  function buildKbRow(item) {
+    var key = kbPinKey(item.category, item.file);
+    var pinned = isKbPinned(key);
+    var row = document.createElement('div');
+    row.className = 'kb-row' + (pinned ? ' kb-row-pinned' : '');
+
+    var top = document.createElement('div');
+    top.className = 'kb-row-top';
+
+    var pinBtn = document.createElement('button');
+    pinBtn.className = 'kb-pin-btn' + (pinned ? ' on' : '');
+    pinBtn.type = 'button';
+    pinBtn.title = pinned ? 'Unpin from KB' : 'Pin in KB';
+    pinBtn.textContent = pinned ? '★' : '☆';
+    pinBtn.addEventListener('click', function(ev) { ev.stopPropagation(); toggleKbPin(key); });
+    top.appendChild(pinBtn);
+
+    var title = document.createElement('span');
+    title.className = 'kb-row-title';
+    title.textContent = item.title || item.file || '(untitled)';
+    title.title = item.title || '';
+    top.appendChild(title);
+    row.appendChild(top);
+
+    var meta = document.createElement('div');
+    meta.className = 'kb-row-meta';
+    meta.textContent = [KB_CAT_LABELS[item.category] || item.category, item.agent || null, item.date || null]
+      .filter(Boolean).join(' · ');
+    row.appendChild(meta);
+
+    if (item.preview) {
+      var prev = document.createElement('div');
+      prev.className = 'kb-row-preview';
+      var t = String(item.preview);
+      prev.textContent = t.length > 200 ? t.slice(0, 200) + '…' : t;
+      row.appendChild(prev);
+    }
+
+    row.addEventListener('click', function() { openKbItem(item.category, item.file); });
+    return row;
+  }
+
+  async function toggleKbPin(key) {
+    var listMsg = document.getElementById('slim-kb-list-msg');
+    if (listMsg) { listMsg.style.color = ''; listMsg.textContent = ''; }
+    try {
+      var res = await fetch('/api/kb-pins/toggle', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ key: key }),
+      });
+      var d = await res.json().catch(function() { return {}; });
+      if (!res.ok) throw new Error(d.error || ('HTTP ' + res.status));
+      if (d.pinned) { if (_kbPins.indexOf(key) === -1) _kbPins.push(key); }
+      else { _kbPins = _kbPins.filter(function(k) { return k !== key; }); }
+      var lw = document.getElementById('slim-kb-list');
+      if (lw) renderKbList(lw);
+    } catch (e) {
+      if (listMsg) { listMsg.style.color = 'var(--red)'; listMsg.textContent = 'Pin toggle failed: ' + (e && e.message ? e.message : e); }
+    }
+  }
+
+  async function openKbItem(category, file) {
+    var body = document.getElementById('slim-knowledge-body');
+    if (!body) return;
+    body.textContent = '';
+    var backRow = document.createElement('div');
+    backRow.className = 'kn-toolbar';
+    var backBtn = document.createElement('button');
+    backBtn.className = 'btn-secondary';
+    backBtn.type = 'button';
+    backBtn.textContent = '← Back to list';
+    backBtn.addEventListener('click', function() { renderKnowledgeTab(); });
+    backRow.appendChild(backBtn);
+    body.appendChild(backRow);
+
+    var head = document.createElement('div');
+    head.className = 'kn-section-head';
+    head.textContent = file;
+    body.appendChild(head);
+
+    var pre = document.createElement('pre');
+    pre.className = 'kb-entry-content';
+    pre.textContent = 'Loading…';
+    body.appendChild(pre);
+
+    try {
+      var res = await fetch('/api/knowledge/' + encodeURIComponent(category) + '/' + encodeURIComponent(file));
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      var text = await res.text();
+      pre.textContent = text.replace(/^---[\s\S]*?---\n*/m, '');
+    } catch (e) {
+      pre.textContent = 'Failed to load entry: ' + (e && e.message ? e.message : e);
+    }
+  }
+
+  function toggleKbCreateForm(body) {
+    var existing = document.getElementById('slim-kb-create');
+    if (existing) { existing.parentNode.removeChild(existing); return; }
+    var form = document.createElement('div');
+    form.id = 'slim-kb-create';
+    form.className = 'kn-create-form';
+
+    var catLabel = document.createElement('label');
+    catLabel.className = 'linkpr-label';
+    catLabel.textContent = 'Category';
+    var catSel = document.createElement('select');
+    catSel.id = 'slim-kb-category';
+    catSel.className = 'linkpr-input';
+    KB_CREATE_CATS.forEach(function(c) {
+      var opt = document.createElement('option');
+      opt.value = c;
+      opt.textContent = KB_CAT_LABELS[c] || c;
+      catSel.appendChild(opt);
+    });
+    catLabel.appendChild(catSel);
+    form.appendChild(catLabel);
+
+    var titleLabel = document.createElement('label');
+    titleLabel.className = 'linkpr-label';
+    titleLabel.textContent = 'Title';
+    var titleInput = document.createElement('input');
+    titleInput.id = 'slim-kb-title';
+    titleInput.className = 'linkpr-input';
+    titleInput.type = 'text';
+    titleInput.placeholder = 'Entry title';
+    titleLabel.appendChild(titleInput);
+    form.appendChild(titleLabel);
+
+    var contentLabel = document.createElement('label');
+    contentLabel.className = 'linkpr-label';
+    contentLabel.textContent = 'Content';
+    var contentInput = document.createElement('textarea');
+    contentInput.id = 'slim-kb-content';
+    contentInput.className = 'linkpr-input';
+    contentInput.rows = 6;
+    contentInput.placeholder = 'Write your knowledge entry…';
+    contentLabel.appendChild(contentInput);
+    form.appendChild(contentLabel);
+
+    var row = document.createElement('div');
+    row.className = 'kn-toolbar kn-toolbar-end';
+    var msg = document.createElement('span');
+    msg.id = 'slim-kb-create-msg';
+    msg.className = 'kn-msg kn-msg-inline';
+    row.appendChild(msg);
+    var saveBtn = document.createElement('button');
+    saveBtn.className = 'btn-primary';
+    saveBtn.type = 'button';
+    saveBtn.textContent = 'Save entry';
+    saveBtn.addEventListener('click', submitKbEntry);
+    row.appendChild(saveBtn);
+    form.appendChild(row);
+
+    // Insert the form directly after the toolbar (before the list).
+    var listWrap = document.getElementById('slim-kb-list');
+    if (listWrap && listWrap.parentNode) listWrap.parentNode.insertBefore(form, listWrap);
+    else body.appendChild(form);
+  }
+
+  async function submitKbEntry() {
+    var catEl = document.getElementById('slim-kb-category');
+    var titleEl = document.getElementById('slim-kb-title');
+    var contentEl = document.getElementById('slim-kb-content');
+    var msg = document.getElementById('slim-kb-create-msg');
+    var category = catEl ? catEl.value : '';
+    var title = titleEl ? (titleEl.value || '').trim() : '';
+    var content = contentEl ? contentEl.value : '';
+    if (!title || !content.trim()) {
+      if (msg) { msg.style.color = 'var(--red)'; msg.textContent = 'Title and content are required.'; }
+      return;
+    }
+    if (msg) { msg.style.color = 'var(--muted)'; msg.textContent = 'Saving…'; }
+    try {
+      var res = await fetch('/api/knowledge', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ category: category, title: title, content: content }),
+      });
+      var d = await res.json().catch(function() { return {}; });
+      if (!res.ok) throw new Error(d.error || ('HTTP ' + res.status));
+      // Refresh the list + count, then re-render the KB tab.
+      var kres = await fetch('/api/knowledge', { headers: { 'Accept': 'application/json' } });
+      if (kres.ok) { _kbData = await kres.json(); _knowledgeCounts.kb = _countKbEntries(_kbData); renderKnowledgeTile(); }
+      if (_knActiveTab === 'kb') renderKnowledgeTab();
+    } catch (e) {
+      if (msg) { msg.style.color = 'var(--red)'; msg.textContent = 'Error: ' + (e && e.message ? e.message : 'failed'); }
+    }
+  }
+
+  // ── Wiring ─────────────────────────────────────────────────────────
+  bindModalClose('slim-knowledge-modal', 'slim-knowledge-close');
+  (function bindKnowledgeUi() {
+    var tabBar = document.getElementById('slim-kn-tabs');
+    if (tabBar) {
+      tabBar.addEventListener('click', function(ev) {
+        var btn = ev.target && ev.target.closest ? ev.target.closest('.kn-tab') : null;
+        if (!btn) return;
+        var tab = btn.getAttribute('data-kn-tab');
+        if (tab) setKnowledgeTab(tab);
+      });
+    }
+    // Populate the notes + KB counts shortly after first paint so the tile
+    // detail reads "N pinned · M notes · K KB" without waiting for a modal open.
+    setTimeout(loadKnowledgeCounts, 1500);
+  })();

package/dashboard/slim/js/members.js

@@ -69,6 +69,29 @@
     grid.appendChild(frag);
   }
 
+  // Live "Working for" ticker for the agent detail modal. Mirrors the legacy
+  // renderer's .agent-runtime-tick pattern (dashboard/js/render-agents.js): a
+  // data-started element refreshed by a 1s interval, cleared on modal close so
+  // no interval leaks once the popout is dismissed.
+  var _agentDetailTimer = null;
+
+  // Format an elapsed-ms span as 'Xh Ym Zs', dropping the hours segment when 0.
+  function _fmtAgentElapsed(ms) {
+    if (!(ms > 0)) ms = 0;
+    var sec = Math.floor(ms / 1000) % 60, min = Math.floor(ms / 60000) % 60, hr = Math.floor(ms / 3600000);
+    return (hr > 0 ? hr + 'h ' : '') + min + 'm ' + sec + 's';
+  }
+
+  function _tickAgentDetailRuntime() {
+    var el = document.getElementById('slim-agent-working-tick');
+    if (!el) { _stopAgentDetailRuntime(); return; }
+    el.textContent = _fmtAgentElapsed(Date.now() - new Date(el.dataset.started).getTime());
+  }
+
+  function _stopAgentDetailRuntime() {
+    if (_agentDetailTimer) { clearInterval(_agentDetailTimer); _agentDetailTimer = null; }
+  }
+
   // Append a labelled key/value row to the agent detail modal body.
   function appendAgentRow(body, key, value, muted) {
     var row = document.createElement('div');
@@ -92,6 +115,8 @@
     var titleEl = document.getElementById('slim-agent-title');
     if (!a || !modal || !body) return;
     if (titleEl) titleEl.textContent = a.name || a.id;
+    // Clear any ticker left over from a previously-opened agent before rebuild.
+    _stopAgentDetailRuntime();
     body.textContent = '';
 
     // Header: emoji + name + role.
@@ -131,6 +156,24 @@
 
     appendAgentRow(body, 'Last result', a.resultSummary || 'No recent output', !a.resultSummary);
 
+    // Only running agents get a live elapsed-time row; idle/done/error don't.
+    if (a.status === 'working' && a.started_at) {
+      var workRow = document.createElement('div');
+      workRow.className = 'agent-detail-row';
+      var workKey = document.createElement('div');
+      workKey.className = 'agent-detail-key';
+      workKey.textContent = 'Working for';
+      var workVal = document.createElement('div');
+      workVal.className = 'agent-detail-val';
+      workVal.id = 'slim-agent-working-tick';
+      workVal.dataset.started = a.started_at;
+      workRow.appendChild(workKey);
+      workRow.appendChild(workVal);
+      body.appendChild(workRow);
+      _tickAgentDetailRuntime();
+      _agentDetailTimer = setInterval(_tickAgentDetailRuntime, 1000);
+    }
+
     modal.classList.add('open');
   }
 

package/dashboard/slim/js/modals-tiles.js

@@ -12,7 +12,9 @@
       if (ev.key === 'Escape' && modal.classList.contains('open')) close();
     });
   }
-  bindModalClose('slim-agent-modal', 'slim-agent-close');
+  // Stop the agent-detail "Working for" ticker on every dismiss path so the
+  // 1s interval started in openAgentDetail can't leak after the modal closes.
+  bindModalClose('slim-agent-modal', 'slim-agent-close', _stopAgentDetailRuntime);
   bindModalClose('slim-tools-modal', 'slim-tools-close');
   bindModalClose('slim-tile-modal', 'slim-tile-close');
 
@@ -249,9 +251,9 @@
   // Populate + open the cockpit-tile detail modal from the latest status
   // snapshot. Mirrors the corresponding old-dashboard tab for each tile.
   function openTileModal(key) {
-    // The Pinned-context tile has its own list/editor modal (view + edit + unpin)
-    // rather than the read-only tile detail view.
-    if (key === 'pinned') { openSlimPinnedList(); return; }
+    // The Knowledge tile opens the unified Knowledge control panel (Pinned
+    // Context + Notes + KB tabs) rather than the read-only tile detail view.
+    if (key === 'knowledge') { openKnowledgeModal(); return; }
     var view = TILE_VIEWS[key];
     if (!view) return;
     var modal = document.getElementById('slim-tile-modal');