@yemi33/minions 0.1.2195 → 0.1.2196

package/dashboard/js/utils.js

@@ -80,24 +80,256 @@ function _togglePinAndRefresh(key, source) {
   else if (source === 'kb') renderKnowledgeBase({ preserveScroll: false });
 }
 
-// Modal navigation stack — enables back button when opening a modal from another modal
-var _modalBackStack = [];
-function pushModalBack(reopenFn) {
-  _modalBackStack.push(reopenFn);
-  var btn = document.getElementById('modal-back-btn');
-  if (btn) btn.style.display = '';
+// Modal navigation stack — frames for nested modal layers (P-ce1e5e47)
+// _modalStack holds breadcrumb frames the user can navigate BACK to.
+// _currentVisibleArtifact tracks the currently-shown modal's identity (set by
+// openArtifact / pushModalFrame). Direct row-click openers may leave this null;
+// the back stack still works via the legacy pushModalBack snapshot path.
+//
+// Each frame: { type, id, scrollY, titleHtml, bodyHtml, openFn, openArgs }.
+// Frames whose type starts with "_" (e.g. _legacy, _direct) are opaque
+// breadcrumb-only frames that are NOT mirrored to the URL hash and are NOT
+// replayed on refresh — they exist only for in-session back navigation.
+var MODAL_STACK_MAX_DEPTH = 5;
+var _modalStack = [];
+var _currentVisibleArtifact = null;
+var _legacyFrameSeq = 0;
+var _suppressHistoryFromPopstate = false;
+
+function _captureModalSnapshot() {
+  var titleEl = document.getElementById('modal-title');
+  var bodyEl = document.getElementById('modal-body');
+  return {
+    titleHtml: titleEl ? titleEl.innerHTML : '',
+    bodyHtml: bodyEl ? bodyEl.innerHTML : '',
+    scrollY: bodyEl ? (bodyEl.scrollTop || 0) : 0,
+  };
+}
+function _modalIsOpen() {
+  var el = document.getElementById('modal');
+  return !!(el && el.classList.contains('open'));
+}
+function _modalStackDepth() {
+  return _modalStack.length + (_currentVisibleArtifact ? 1 : 0);
+}
+function _capModalStackDepth() {
+  // Cap at MODAL_STACK_MAX_DEPTH: a 6th push evicts the OLDEST breadcrumb
+  // (index 0 of _modalStack), never the visible top.
+  while (_modalStackDepth() > MODAL_STACK_MAX_DEPTH && _modalStack.length > 0) {
+    _modalStack.shift();
+  }
 }
-function modalGoBack() {
-  var fn = _modalBackStack.pop();
+function _updateModalChrome() {
+  var depth = _modalStackDepth();
   var btn = document.getElementById('modal-back-btn');
-  if (btn && _modalBackStack.length === 0) btn.style.display = 'none';
-  if (fn) fn();
+  if (btn) btn.style.display = depth > 1 ? '' : 'none';
+  var chip = document.getElementById('modal-stack-chip');
+  if (chip) {
+    if (depth > 1) {
+      chip.style.display = '';
+      chip.textContent = depth + '/' + MODAL_STACK_MAX_DEPTH;
+    } else {
+      chip.style.display = 'none';
+    }
+  }
 }
-function clearModalBackStack() {
-  _modalBackStack = [];
-  var btn = document.getElementById('modal-back-btn');
-  if (btn) btn.style.display = 'none';
+function _buildModalHash() {
+  var entries = [];
+  for (var i = 0; i < _modalStack.length; i++) {
+    var f = _modalStack[i];
+    if (f && f.type && f.id && String(f.type).charAt(0) !== '_') {
+      entries.push(encodeURIComponent(f.type) + ':' + encodeURIComponent(f.id));
+    }
+  }
+  if (_currentVisibleArtifact && _currentVisibleArtifact.type && _currentVisibleArtifact.id) {
+    entries.push(
+      encodeURIComponent(_currentVisibleArtifact.type) + ':' +
+      encodeURIComponent(_currentVisibleArtifact.id)
+    );
+  }
+  var base = window.location.pathname + window.location.search;
+  if (entries.length === 0) return base;
+  // Cap URL to last MODAL_STACK_MAX_DEPTH entries (truncate oldest)
+  if (entries.length > MODAL_STACK_MAX_DEPTH) entries = entries.slice(-MODAL_STACK_MAX_DEPTH);
+  // P-3ed68b1e — frame separator is ',' (not '>'); '>' is in the WHATWG URL
+  // fragment percent-encode set and Chromium rewrites it to '%3E' on
+  // history.pushState, which broke deep-link replay (split('>') saw zero
+  // separators). ',' survives history serialisation intact, and since type
+  // + id are individually encodeURIComponent'd (',' itself encodes to
+  // '%2C'), no frame field can collide with the separator.
+  return base + '#modal=' + entries.join(',');
+}
+function _serializeStackForHistory() {
+  return {
+    breadcrumbs: _modalStack.map(function(f) { return { type: f.type, id: f.id }; }),
+    current: _currentVisibleArtifact
+      ? { type: _currentVisibleArtifact.type, id: _currentVisibleArtifact.id }
+      : null,
+  };
+}
+function _pushModalHistoryState() {
+  if (_suppressHistoryFromPopstate) return;
+  try {
+    var state = { page: (typeof currentPage !== 'undefined' ? currentPage : null), modal: _serializeStackForHistory() };
+    history.pushState(state, '', _buildModalHash());
+  } catch { /* history disabled (e.g. file://) — fall back to in-memory stack */ }
+}
+
+function pushModalFrame(frame) {
+  // frame: { type, id, openFn?, openArgs? } — describes the NEW visible modal.
+  // The current visible (if any) is snapshotted and pushed onto _modalStack as
+  // a breadcrumb; scrollY is captured here so popping restores the user's
+  // place in the parent view.
+  if (_currentVisibleArtifact) {
+    var snap = _captureModalSnapshot();
+    _modalStack.push({
+      type: _currentVisibleArtifact.type,
+      id: _currentVisibleArtifact.id,
+      titleHtml: snap.titleHtml,
+      bodyHtml: snap.bodyHtml,
+      scrollY: snap.scrollY,
+      openFn: _currentVisibleArtifact.openFn || null,
+      openArgs: _currentVisibleArtifact.openArgs || null,
+    });
+  } else if (_modalIsOpen()) {
+    // Modal was direct-opened (row click) without going through openArtifact.
+    // Snapshot it as an opaque _direct breadcrumb so Back still restores it.
+    var snap2 = _captureModalSnapshot();
+    _modalStack.push({
+      type: '_direct',
+      id: '_direct_' + (++_legacyFrameSeq),
+      titleHtml: snap2.titleHtml,
+      bodyHtml: snap2.bodyHtml,
+      scrollY: snap2.scrollY,
+      openFn: null,
+      openArgs: null,
+    });
+  }
+  _currentVisibleArtifact = {
+    type: frame.type,
+    id: frame.id,
+    openFn: typeof frame.openFn === 'function' ? frame.openFn : null,
+    openArgs: Array.isArray(frame.openArgs) ? frame.openArgs : null,
+  };
+  _capModalStackDepth();
+  _updateModalChrome();
+  _pushModalHistoryState();
+}
+
+function popModalFrame() {
+  // Esc / X / back-btn / browser Back all funnel here. Use history.back() so
+  // the popstate listener is the single source of truth for stack diffing.
+  if (_modalStackDepth() === 0) {
+    if (_modalIsOpen()) _physicallyCloseModal();
+    return;
+  }
+  try { history.back(); }
+  catch { _popOneFrameInternal(); _updateModalChrome(); }
+}
+
+function peekTopFrame() {
+  if (_currentVisibleArtifact) {
+    return Object.assign({}, _currentVisibleArtifact);
+  }
+  if (_modalStack.length > 0) {
+    return Object.assign({}, _modalStack[_modalStack.length - 1]);
+  }
+  return null;
+}
+
+function resetModalStack() {
+  _modalStack = [];
+  _currentVisibleArtifact = null;
+  _updateModalChrome();
+}
+
+function withTopFrame(type, id, fn) {
+  // Guard for per-modal poll bodies: only invoke `fn` when the named frame is
+  // still the visible top, so a stale poll on a lower frame can't clobber the
+  // user's currently-stacked modal. When no stack is tracked (direct-opened
+  // modal — _currentVisibleArtifact is null and _modalStack is empty) the
+  // poll proceeds unconditionally; row-click openers haven't routed through
+  // openArtifact, so we have no identity to check.
+  var top = peekTopFrame();
+  if (top && (top.type !== type || String(top.id) !== String(id))) return false;
+  try { fn(); } catch (e) { try { console.error(e); } catch {} }
+  return true;
+}
+
+function _restoreFrameToVisible(frame) {
+  // Synchronously restore a snapshotted frame as the visible modal layer.
+  // scrollY is restored after a double-rAF so layout settles first.
+  var titleEl = document.getElementById('modal-title');
+  var bodyEl = document.getElementById('modal-body');
+  if (titleEl) {
+    // eslint-disable-next-line no-unsanitized/property -- reason: snapshot of previously-rendered (already-escaped) modal title HTML; round-trip restore only
+    titleEl.innerHTML = frame.titleHtml || '';
+  }
+  if (bodyEl) {
+    // eslint-disable-next-line no-unsanitized/property -- reason: snapshot of previously-rendered (already-escaped) modal body HTML; round-trip restore only
+    bodyEl.innerHTML = frame.bodyHtml || '';
+  }
+  var modalEl = document.getElementById('modal');
+  if (modalEl && !modalEl.classList.contains('open')) modalEl.classList.add('open');
+  requestAnimationFrame(function() {
+    requestAnimationFrame(function() {
+      var b = document.getElementById('modal-body');
+      if (b) b.scrollTop = frame.scrollY || 0;
+    });
+  });
+}
+
+function _popOneFrameInternal() {
+  // Pop one breadcrumb and restore it as the visible modal. Used by the
+  // popstate handler (and as a fallback when history.back is unavailable).
+  if (_modalStack.length === 0) {
+    // Nothing to fall back to — close the modal entirely.
+    _currentVisibleArtifact = null;
+    if (_modalIsOpen()) _physicallyCloseModal();
+    return;
+  }
+  var frame = _modalStack.pop();
+  _currentVisibleArtifact = {
+    type: frame.type,
+    id: frame.id,
+    openFn: frame.openFn,
+    openArgs: frame.openArgs,
+  };
+  _restoreFrameToVisible(frame);
+}
+
+function _physicallyCloseModal() {
+  // Close the modal DOM without going through closeModal() (which would itself
+  // call popModalFrame and recurse). Mirrors the visible side-effects of
+  // closeModal but skips stack management.
+  var modalEl = document.getElementById('modal');
+  if (modalEl) modalEl.classList.remove('open');
+  var inner = document.querySelector('#modal .modal');
+  if (inner) inner.classList.remove('modal-wide');
+}
+
+// ─── Deprecation shims (legacy back-stack API) ───────────────────────────────
+// Existing callers in render-work-items.js and render-pipelines.js still use
+// pushModalBack(closure); on Back the closure re-renders the prior modal.
+// We translate this into a breadcrumb push that carries the snapshot of the
+// outgoing modal, so the new popstate-driven Back returns the same view.
+function pushModalBack(reopenFn) {
+  var snap = _captureModalSnapshot();
+  _modalStack.push({
+    type: '_legacy',
+    id: '_legacy_' + (++_legacyFrameSeq),
+    titleHtml: snap.titleHtml,
+    bodyHtml: snap.bodyHtml,
+    scrollY: snap.scrollY,
+    openFn: typeof reopenFn === 'function' ? reopenFn : null,
+    openArgs: null,
+  });
+  _capModalStackDepth();
+  _updateModalChrome();
+  _pushModalHistoryState();
 }
+function modalGoBack() { popModalFrame(); }
+function clearModalBackStack() { resetModalStack(); }
 
 function updateModalPinBtn() {
   var btn = document.getElementById('modal-pin-btn');

package/dashboard/layout.html

@@ -127,6 +127,8 @@
     <div class="modal-header">
       <h3 id="modal-title">—</h3>
       <div class="modal-header-actions">
+        <button class="modal-copy modal-back-btn" id="modal-back-btn" onclick="popModalFrame()" title="Back to previous modal" style="display:none"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z"/></svg> Back</button>
+        <span class="modal-stack-chip" id="modal-stack-chip" title="Modal stack depth" style="display:none">1/5</span>
         <button class="modal-copy" id="modal-edit-btn" onclick="modalToggleEdit()" title="Edit" style="display:none"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61zM12.9 2.97L4.288 11.58l-.537 1.878 1.878-.537L14.242 4.31 12.9 2.97z"/></svg> Edit</button>
         <button class="modal-copy is-success" id="modal-save-btn" onclick="modalSaveEdit()" title="Save" style="display:none"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/></svg> Save</button>
         <button class="modal-copy" id="modal-cancel-edit-btn" onclick="modalCancelEdit()" title="Cancel edit" style="display:none">Cancel</button>

package/dashboard/slim/body.html

@@ -106,11 +106,11 @@
             <div class="cockpit-value dim">0</div>
             <div class="cockpit-detail">no watches set</div>
           </div>
-          <div class="cockpit-tile" data-tile="pinned">
+          <div class="cockpit-tile" data-tile="knowledge">
             <button id="slim-tile-pin-chip" class="linkpr-chip on-tile" type="button" title="Pin content">+ Pin</button>
-            <div class="cockpit-label"><span class="cockpit-dot"></span> Pinned context</div>
+            <div class="cockpit-label"><span class="cockpit-dot"></span> Knowledge</div>
             <div class="cockpit-value dim">0</div>
-            <div class="cockpit-detail">nothing pinned</div>
+            <div class="cockpit-detail">pinned context, notes &amp; KB</div>
           </div>
         </div>
       </div>
@@ -187,18 +187,28 @@
   </div>
 </div>
 
-<!-- Pinned context list — opened from the "Pinned context" status tile. Lists
-     all pinned notes with view/edit/unpin; "+ Pin content" opens the editor.
-     Backed by /api/pinned (GET via /api/status), /api/pinned/update, /remove.
-     Wired in dashboard/slim/js/pinned.js. -->
-<div class="modal-bg" id="slim-pinned-modal">
-  <div class="modal">
+<!-- Knowledge control panel — opened from the "Knowledge" status tile. One
+     unified box surfacing all three knowledge surfaces via tabs: Pinned
+     Context, Notes, and KB (knowledge base). Each tab is rendered lazily by
+     dashboard/slim/js/knowledge.js into #slim-knowledge-body. Backed by the
+     existing endpoints (no new server routes):
+       Pinned — /api/pinned (+ update/remove), surfaced via /api/status.
+       Notes  — /api/notes-full (read), /api/notes-save (edit notes.md),
+                /api/notes (add an inbox note).
+       KB     — /api/knowledge (list), /api/knowledge/:cat/:file (read),
+                /api/knowledge POST (create), /api/kb-pins(+/toggle). -->
+<div class="modal-bg" id="slim-knowledge-modal">
+  <div class="modal slim-knowledge-modal-inner">
     <div class="modal-header">
-      <h3>Pinned context</h3>
-      <button id="slim-pinned-add" class="linkpr-chip" type="button" style="margin-left:auto;margin-right:8px">+ Pin content</button>
-      <button id="slim-pinned-close" class="icon-btn" title="Close">&times;</button>
+      <h3>Knowledge</h3>
+      <div class="kn-tabs" id="slim-kn-tabs" role="tablist">
+        <button class="kn-tab active" id="slim-kn-tab-pinned" data-kn-tab="pinned" type="button" role="tab" aria-selected="true" aria-controls="slim-knowledge-body">Pinned Context</button>
+        <button class="kn-tab" id="slim-kn-tab-notes" data-kn-tab="notes" type="button" role="tab" aria-selected="false" aria-controls="slim-knowledge-body">Notes</button>
+        <button class="kn-tab" id="slim-kn-tab-kb" data-kn-tab="kb" type="button" role="tab" aria-selected="false" aria-controls="slim-knowledge-body">KB</button>
+      </div>
+      <button id="slim-knowledge-close" class="icon-btn" title="Close" style="margin-left:auto">&times;</button>
     </div>
-    <div class="modal-body" id="slim-pinned-body"></div>
+    <div class="modal-body" id="slim-knowledge-body" role="tabpanel" tabindex="0" aria-labelledby="slim-kn-tab-pinned"></div>
   </div>
 </div>