@yemi33/minions 0.1.2195 → 0.1.2196

package/dashboard/js/render-utils.js

@@ -575,4 +575,154 @@ function restoreDashboardScrollState(root, state) {
   });
 }
 
-window.MinionsRenderUtils = { formatToolSummary, renderAgentOutput, renderTerminalBanner, renderPager, pinButton, captureDashboardScrollState, restoreDashboardScrollState };
+// P-ce1e5e47 — universal artifact-modal dispatcher. Chip clicks (and the
+// URL-hash replay path) call openArtifact(type, id); this pushes a stack
+// frame and delegates to the existing per-type opener.
+//
+// Type → handler table:
+//   wi        → openWorkItemDetail(id)
+//   pr        → openPrDetail(id)            (P-79b47b0c; falls back to openPrUrl)
+//   plan/prd  → planView(id)
+//   note      → openInboxNote(id)
+//   kb        → kbOpenItem(category, file)  (id = "category/file")
+//   schedule  → openScheduleDetail(id)
+//   watch     → openWatchDetail(id)
+//   pipeline  → openPipelineDetail(id)
+//   meeting   → openMeetingDetail(id)
+//   agent     → openAgentDetail(id)         ← detail-panel exception (see below)
+//
+// P-30b6cf8a — Detail-panel exception (intentional, documented). The agent
+// type does NOT push a modal-stack frame and does NOT use the modal shell.
+// openAgentDetail() opens the right-side slide-in detail panel (tabs +
+// live-stream + charter editor) which is a peer of the modal stack, not a
+// member of it. Clicking an agent chip from inside a modal therefore:
+//   1. Resets the modal stack (resetModalStack) and physically closes the
+//      modal shell — modal-stack identity goes back to empty.
+//   2. Opens the agent detail panel.
+// The reverse direction is symmetric: clicking a WI/PR/plan chip from
+// inside the panel calls openArtifact('<type>', id), which (per the
+// non-agent branch below) closes the detail panel and starts a fresh
+// modal stack. This one-way exception is the deliberate contract — do
+// NOT "fix" it by adding pushModalFrame for the agent type. See the
+// matching JSDoc on dashboard/js/render-agents.js openAgentDetail().
+function openArtifact(type, id) {
+  if (!type || id === undefined || id === null) return;
+  if (type === 'agent') {
+    if (typeof resetModalStack === 'function') resetModalStack();
+    if (typeof _physicallyCloseModal === 'function') _physicallyCloseModal();
+    if (typeof openAgentDetail === 'function') openAgentDetail(id);
+    return;
+  }
+  // Non-agent (modal) type: dismiss the detail panel if it's open so the
+  // modal-stack peer cleanly takes over the foreground.
+  try {
+    var panelEl = document.getElementById('detail-panel');
+    if (panelEl && panelEl.classList.contains('open') && typeof closeDetail === 'function') {
+      closeDetail();
+    }
+  } catch { /* DOM may not be ready in unit-test eval */ }
+  if (typeof pushModalFrame === 'function') {
+    try {
+      pushModalFrame({ type: type, id: String(id), openFn: openArtifact, openArgs: [type, String(id)] });
+    } catch (e) { try { console.error('pushModalFrame failed', e); } catch {} }
+  }
+  switch (type) {
+    case 'wi':
+      if (typeof openWorkItemDetail === 'function') openWorkItemDetail(id);
+      break;
+    case 'pr':
+      if (typeof openPrDetail === 'function') openPrDetail(id);
+      else if (typeof window !== 'undefined' && window.MinionsPrs && typeof window.MinionsPrs.openPrDetail === 'function') window.MinionsPrs.openPrDetail(id);
+      break;
+    case 'plan':
+    case 'prd':
+      if (typeof planView === 'function') planView(id);
+      break;
+    case 'note':
+      if (typeof openInboxNote === 'function') openInboxNote(id);
+      break;
+    case 'kb': {
+      var idx = String(id).indexOf('/');
+      if (idx > 0 && typeof kbOpenItem === 'function') {
+        kbOpenItem(String(id).slice(0, idx), String(id).slice(idx + 1));
+      }
+      break;
+    }
+    case 'schedule':
+      if (typeof openScheduleDetail === 'function') openScheduleDetail(id);
+      break;
+    case 'watch':
+      if (typeof openWatchDetail === 'function') openWatchDetail(id);
+      break;
+    case 'pipeline':
+      if (typeof openPipelineDetail === 'function') openPipelineDetail(id);
+      break;
+    case 'meeting':
+      if (typeof openMeetingDetail === 'function') openMeetingDetail(id);
+      break;
+    default:
+      try { console.warn('openArtifact: unknown type', type); } catch {}
+  }
+}
+
+// P-e265cd31 — shared artifact-chip renderer. Every chip click routes through
+// openArtifact() so the modal stack push, URL-hash update, and browser-Back
+// integration come for free at every callsite (no more inline
+// pushModalBack(...);openXxxDetail(...) string-built pills).
+//
+// Icon table — keep consistent across the dashboard:
+//   wi=📋  pr=🔀  plan=📋  prd=📄  note=📝  kb=📚
+//   schedule=⏰  watch=👁  pipeline=⛓  meeting=🗣  agent=🤖
+//
+// Options:
+//   type     — one of the icon-table keys (case-sensitive)
+//   id       — artifact identifier; passed verbatim to openArtifact(type, id)
+//   label    — visible chip text (defaults to id)
+//   title    — optional hover tooltip (defaults to empty)
+//   icon     — optional icon override (defaults to ICON_TABLE[type])
+//   deleted  — true → render struck-out, non-clickable chip so dead refs
+//              still show context to the operator
+//
+// Unknown type with no explicit icon falls back to a plain escaped span (no
+// chip styling, no throw) so callers can pass through arbitrary refs safely.
+var _ARTIFACT_ICON_TABLE = {
+  wi: '📋', pr: '🔀', plan: '📋', prd: '📄', note: '📝', kb: '📚',
+  schedule: '⏰', watch: '👁', pipeline: '⛓', meeting: '🗣', agent: '🤖',
+};
+
+function renderArtifactLink(opts) {
+  var o = opts || {};
+  var type = String(o.type == null ? '' : o.type);
+  var id = o.id == null ? '' : String(o.id);
+  var label = o.label == null ? id : String(o.label);
+  var title = o.title == null ? '' : String(o.title);
+  var hasIconOverride = typeof o.icon === 'string' && o.icon.length > 0;
+  var icon = hasIconOverride ? o.icon : (_ARTIFACT_ICON_TABLE[type] || '');
+  var deleted = o.deleted === true;
+
+  if (!Object.prototype.hasOwnProperty.call(_ARTIFACT_ICON_TABLE, type) && !hasIconOverride) {
+    return '<span class="artifact-chip-unknown">' + escHtml(label) + '</span>';
+  }
+
+  var classes = 'artifact-chip' + (deleted ? ' deleted' : '');
+  // JSON.stringify produces a safe JS string literal (handles backslashes,
+  // quotes, control chars). escHtml then makes it safe for the attribute
+  // value; the HTML parser reverses the entity escapes before the JS
+  // evaluator sees them, so the call site always receives the original
+  // string values.
+  var clickAttr = deleted
+    ? ''
+    : ' onclick="event.stopPropagation();openArtifact('
+        + escHtml(JSON.stringify(type)) + ','
+        + escHtml(JSON.stringify(id)) + ')"';
+  var titleAttr = title ? ' title="' + escHtml(title) + '"' : '';
+  return '<span class="' + classes + '"'
+       + ' data-art-type="' + escHtml(type) + '"'
+       + ' data-art-id="' + escHtml(id) + '"'
+       + clickAttr + titleAttr + '>'
+       + (icon ? '<span class="artifact-chip-icon">' + escHtml(icon) + '</span>' : '')
+       + '<span class="artifact-chip-label">' + escHtml(label) + '</span>'
+       + '</span>';
+}
+
+window.MinionsRenderUtils = { formatToolSummary, renderAgentOutput, renderTerminalBanner, renderPager, pinButton, captureDashboardScrollState, restoreDashboardScrollState, openArtifact, renderArtifactLink };

package/dashboard/js/render-watches.js

@@ -101,6 +101,48 @@ function _targetTypeLabel(type) {
   return _WATCH_TARGET_LABELS[type] || (type || '');
 }
 
+// P-1acd4cde — map a watch.targetType to the artifact-chip type understood by
+// renderArtifactLink / openArtifact (defined in render-utils.js). Returns null
+// for targetTypes that don't correspond to a navigable artifact (teams-channel,
+// future plugin types) so callers fall back to plain text rendering. The
+// mapping covers the 8 first-class TARGET_TYPES registered in engine/watches.js
+// (engine/shared.js#WATCH_TARGET_TYPE) — dispatch ids are WI ids in practice
+// so they share the wi chip target.
+var _WATCH_TARGET_TO_ART_TYPE = {
+  'pr': 'pr',
+  'work-item': 'wi',
+  'meeting': 'meeting',
+  'plan': 'plan',
+  'schedule': 'schedule',
+  'pipeline': 'pipeline',
+  'dispatch': 'wi',
+  'agent': 'agent',
+};
+function _watchTargetToArtType(targetType) {
+  if (!targetType) return null;
+  return _WATCH_TARGET_TO_ART_TYPE[targetType] || null;
+}
+
+// P-1acd4cde — render the watch target as a clickable artifact chip when the
+// targetType maps to a known artifact AND the target is a non-empty string id.
+// Object targets (e.g. teams-channel `{teamId, channelId}`) and plugin
+// targetTypes without an artifact equivalent fall back to the legacy
+// _formatWatchTarget plain text so the W-mq1j5f9z00030b8f title-fallback
+// contract still holds for non-artifact watches.
+function _renderWatchTargetChip(w) {
+  var artType = _watchTargetToArtType(w && w.targetType);
+  if (artType && typeof w.target === 'string' && w.target.length > 0
+      && typeof renderArtifactLink === 'function') {
+    return renderArtifactLink({
+      type: artType,
+      id: w.target,
+      label: w.target,
+      title: _targetTypeLabel(w.targetType) + ' ' + w.target,
+    });
+  }
+  return escHtml(_formatWatchTarget(w && w.target, w && w.targetType));
+}
+
 // W-mq1j5f9z00030b8f — `teams-channel` target is `{teamId, channelId}` (object);
 // other targetTypes use strings. Avoid `String(target)` → "[object Object]";
 // route all target rendering here so future object-target plugins inherit safety.
@@ -339,7 +381,7 @@ function openWatchDetail(id) {
 
   var body = '<div style="display:flex;flex-direction:column;gap:10px;font-size:var(--text-md);line-height:1.6">' +
     '<div><strong style="color:var(--muted)">ID:</strong> ' + escHtml(w.id) + '</div>' +
-    '<div><strong style="color:var(--muted)">Target:</strong> ' + escHtml(_formatWatchTarget(w.target, w.targetType)) + '</div>' +
+    '<div><strong style="color:var(--muted)">Target:</strong> ' + _renderWatchTargetChip(w) + '</div>' +
     '<div><strong style="color:var(--muted)">Target Type:</strong> <span class="dispatch-type explore">' + escHtml(targetLabel) + '</span></div>' +
     '<div><strong style="color:var(--muted)">Condition:</strong> <span style="color:var(--blue)">' + escHtml(condLabel) + '</span></div>' +
     '<div><strong style="color:var(--muted)">Check Interval:</strong> ' + escHtml(_intervalToHuman(w.interval)) + '</div>' +
@@ -356,7 +398,7 @@ function openWatchDetail(id) {
     // P-w14e7a8c — Phase 7.1: render cross-target requirements list when
     // the watch carries a non-empty requires[] from the editor.
     _renderWatchRequiresDetail(w.requires) +
-    (w._lastActionResult ? '<div><strong style="color:var(--muted)">Last Action Result:</strong> <span style="color:' + (w._lastActionResult.ok ? 'var(--green)' : 'var(--red)') + '">' + (w._lastActionResult.ok ? 'OK' : 'FAILED') + '</span> — ' + escHtml(w._lastActionResult.summary || '') + (w._lastActionResult.dispatchedItemId ? ' (dispatched: ' + escHtml(w._lastActionResult.dispatchedItemId) + ')' : '') + '</div>' : '') +
+    (w._lastActionResult ? '<div><strong style="color:var(--muted)">Last Action Result:</strong> <span style="color:' + (w._lastActionResult.ok ? 'var(--green)' : 'var(--red)') + '">' + (w._lastActionResult.ok ? 'OK' : 'FAILED') + '</span> — ' + escHtml(w._lastActionResult.summary || '') + (w._lastActionResult.dispatchedItemId && typeof renderArtifactLink === 'function' ? ' ' + renderArtifactLink({ type: 'wi', id: String(w._lastActionResult.dispatchedItemId), label: String(w._lastActionResult.dispatchedItemId), title: 'Dispatched work item ' + w._lastActionResult.dispatchedItemId }) : '') + '</div>' : '') +
     '<div><strong style="color:var(--muted)">Created:</strong> ' + escHtml(createdAt) + '</div>' +
     '<div><strong style="color:var(--muted)">Last Checked:</strong> ' + escHtml(lastChecked) + '</div>' +
     '<div><strong style="color:var(--muted)">Last Triggered:</strong> ' + escHtml(lastTriggered) + '</div>' +
@@ -389,13 +431,22 @@ function openWatchDetail(id) {
       return res.json();
     }).then(function(data) {
       if (!container.isConnected) return; // user closed the modal
-      // eslint-disable-next-line no-unsanitized/property -- reason: _renderWatchHistoryDetail() escapes all user-controlled fields before assembling HTML
-      container.innerHTML = _renderWatchHistoryDetail(data && data.history);
+      // P-ce1e5e47 — skip the history render when the user has stacked
+      // another modal on top of this watch view.
+      var apply = function() {
+        // eslint-disable-next-line no-unsanitized/property -- reason: _renderWatchHistoryDetail() escapes all user-controlled fields before assembling HTML
+        container.innerHTML = _renderWatchHistoryDetail(data && data.history);
+      };
+      if (typeof withTopFrame === 'function') withTopFrame('watch', w.id, apply);
+      else apply();
     }).catch(function() {
       if (!container.isConnected) return;
-      // Fall back to the inline _history from /api/watches (best-effort).
-      // eslint-disable-next-line no-unsanitized/property -- reason: _renderWatchHistoryDetail() escapes all user-controlled fields before assembling HTML
-      container.innerHTML = _renderWatchHistoryDetail(w._history || []);
+      var applyFallback = function() {
+        // eslint-disable-next-line no-unsanitized/property -- reason: _renderWatchHistoryDetail() escapes all user-controlled fields before assembling HTML
+        container.innerHTML = _renderWatchHistoryDetail(w._history || []);
+      };
+      if (typeof withTopFrame === 'function') withTopFrame('watch', w.id, applyFallback);
+      else applyFallback();
     });
   })();
 }
@@ -824,4 +875,7 @@ window.MinionsWatches = {
   // W-mq1j5f9z00030b8f — target / title fallback helpers exposed for unit coverage.
   _formatWatchTarget: _formatWatchTarget,
   _watchTitleFallback: _watchTitleFallback,
+  // P-1acd4cde — watch ↔ target artifact-chip linkage helpers exposed for unit coverage.
+  _watchTargetToArtType: _watchTargetToArtType,
+  _renderWatchTargetChip: _renderWatchTargetChip,
 };

package/dashboard/js/render-work-items.js

@@ -668,6 +668,19 @@ async function _submitCreateWorkItem(e) {
   } catch (e) { alert('Error: ' + e.message); openCreateWorkItemModal(); }
 }
 
+// P-79b47b0c — Derive a canonical PR id (`<host>:<slug>#<number>`) from a
+// GitHub or ADO PR URL. Matches the format produced by engine/queries.js
+// when stamping pr.id. Returns null when the URL doesn't match a known
+// host pattern.
+function _wiDeriveCanonicalPrIdFromUrl(url) {
+  if (!url || typeof url !== 'string') return null;
+  var ghMatch = url.match(/https?:\/\/github\.com\/([^/]+\/[^/]+)\/pull\/(\d+)/i);
+  if (ghMatch) return 'github:' + ghMatch[1] + '#' + ghMatch[2];
+  var adoMatch = url.match(/https?:\/\/dev\.azure\.com\/([^/]+)\/([^/]+)\/_git\/([^/?]+)\/pullrequest\/(\d+)/i);
+  if (adoMatch) return 'ado:' + adoMatch[1] + '/' + adoMatch[2] + '/' + adoMatch[3] + '#' + adoMatch[4];
+  return null;
+}
+
 function _wiRenderDetail(item) {
   const field = (label, value) => value ? '<div style="margin-bottom:8px"><span style="color:var(--muted);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:0.5px">' + label + '</span><div style="margin-top:2px">' + value + '</div></div>' : '';
   const badge = (cls, text) => '<span class="pr-badge ' + cls + '">' + escapeHtml(text) + '</span>';
@@ -753,8 +766,18 @@ function _wiRenderDetail(item) {
   // Defensive: CC dispatches can land here with these fields as strings
   // (e.g. acceptanceCriteria: "fix the login bug"). Coerce to arrays so
   // .map() doesn't throw and crash the modal.
+  // P-79b47b0c — depends_on[] now renders as WI chips routed through
+  // renderArtifactLink (was bare <code> spans). Each chip clicks into the
+  // dependency's WI detail modal in-stack.
   var deps = Array.isArray(item.depends_on) ? item.depends_on : [];
-  if (deps.length) html += field('Depends On', deps.map(d => '<code>' + escapeHtml(d) + '</code>').join(', '));
+  if (deps.length) {
+    html += field('Depends On', deps.map(d => renderArtifactLink({ type: 'wi', id: String(d), label: String(d), title: 'Depends on ' + d })).join(' '));
+  }
+  // P-79b47b0c — parent_id chip (when present). Surfaces the parent WI that
+  // decomposed/spawned this child item.
+  if (item.parent_id) {
+    html += field('Parent Work Item', renderArtifactLink({ type: 'wi', id: String(item.parent_id), label: String(item.parent_id), title: 'Parent: ' + item.parent_id }));
+  }
   var ac = Array.isArray(item.acceptanceCriteria)
     ? item.acceptanceCriteria
     : (typeof item.acceptanceCriteria === 'string' && item.acceptanceCriteria.trim()
@@ -774,38 +797,114 @@ function _wiRenderDetail(item) {
     html += field('References', '<span style="color:var(--muted)">' + item.referencesCount + ' reference(s) — loading…</span>');
   }
   if (item._humanFeedback) html += field('Human Feedback', (item._humanFeedback.rating === 'up' ? '👍' : '👎') + (item._humanFeedback.comment ? ' — ' + escapeHtml(item._humanFeedback.comment) : ''));
-  if (item._pr) html += field('Pull Request', '<a href="' + escapeHtml(item._prUrl || '#') + '" target="_blank" style="color:var(--blue)">' + escapeHtml(item._pr) + '</a>');
+  // P-79b47b0c — PR chip routed through renderArtifactLink so click opens the
+  // PR detail modal in-stack (was a raw <a target="_blank">).
+  if (item._pr) html += field('Pull Request', renderArtifactLink({ type: 'pr', id: item._pr, label: item._pr, title: item._prUrl || item._pr }));
+  // P-79b47b0c — follow-up parent PR chip. WIs spawned by PR review/build-fix
+  // dispatchers stamp meta.pr_followup.{parent_pr_url, parent_pr_id} on the
+  // child item; surface that lineage as a clickable in-stack PR chip. Prefer
+  // parent_pr_id when stamped; otherwise parse the URL into a canonical id.
+  var followup = item.meta && item.meta.pr_followup;
+  if (followup && (followup.parent_pr_id || followup.parent_pr_url)) {
+    var parentPrId = followup.parent_pr_id || _wiDeriveCanonicalPrIdFromUrl(followup.parent_pr_url);
+    if (parentPrId) {
+      html += field('Parent PR (follow-up)', renderArtifactLink({ type: 'pr', id: parentPrId, label: parentPrId, title: 'Follow-up from ' + (followup.parent_pr_url || parentPrId) }));
+    } else if (followup.parent_pr_url) {
+      // Couldn't derive a canonical id (unknown host?). Fall back to plain link.
+      html += field('Parent PR (follow-up)', '<a href="' + escapeHtml(followup.parent_pr_url) + '" target="_blank" rel="noopener" style="color:var(--blue)">' + escapeHtml(followup.parent_pr_url) + '</a>');
+    }
+  }
 
-  // Artifacts — output log, branch, skills, etc.
+  // P-c549d07e — "Spawned by" back-link chip. The schedule/pipeline that
+  // dispatched this WI is the natural Back target from the WI modal. The
+  // primary source is meta.spawnedBy ('schedule:<id>' | 'pipeline:<id>'),
+  // stamped by engine/scheduler.js + engine/pipeline.js on new dispatches.
+  // For older WIs already in state we fall back to (a) item._scheduleId
+  // and (b) item.createdBy when it starts with 'pipeline:' so historical
+  // items still light up the chip — purely additive, no behavior change.
+  (function() {
+    var meta = item.meta || {};
+    var spawnedBy = typeof meta.spawnedBy === 'string' ? meta.spawnedBy : '';
+    if (!spawnedBy && item._scheduleId) spawnedBy = 'schedule:' + item._scheduleId;
+    if (!spawnedBy && typeof item.createdBy === 'string' && item.createdBy.indexOf('pipeline:') === 0) {
+      spawnedBy = item.createdBy;
+    }
+    if (!spawnedBy) return;
+    var colonIdx = spawnedBy.indexOf(':');
+    if (colonIdx <= 0) return;
+    var kind = spawnedBy.slice(0, colonIdx);
+    var dispatcherId = spawnedBy.slice(colonIdx + 1);
+    if (!dispatcherId) return;
+    var chip;
+    if (kind === 'schedule') {
+      chip = renderArtifactLink({ type: 'schedule', id: dispatcherId, label: dispatcherId, title: 'Open schedule ' + dispatcherId });
+    } else if (kind === 'pipeline') {
+      chip = renderArtifactLink({ type: 'pipeline', id: dispatcherId, label: dispatcherId, title: 'Open pipeline ' + dispatcherId });
+    } else {
+      return;
+    }
+    html += field('Spawned by', chip);
+  })();
+
+  // Artifacts — branch (non-navigation) + navigation chips routed through
+  // renderArtifactLink so chip click → openArtifact() → modal-stack push +
+  // URL hash + browser-Back integration come for free (P-e265cd31).
+  // P-79b47b0c — also surface item._source (the WI's raw source file) as a
+  // dedicated chip when it isn't already covered by arts.plan / arts.prd /
+  // arts.sourcePlan. Chip type is inferred from the file extension (.md →
+  // plan, .json → prd).
   var arts = item._artifacts || {};
   var artPills = '';
-  var pillStyle = 'display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:10px;font-size:var(--text-sm);cursor:pointer;background:var(--surface2);border:1px solid var(--border);color:var(--text)';
-  // Output log pill removed — raw stream-json output is not human-readable
-  var artBackFn = "pushModalBack(function(){openWorkItemDetail('" + escapeHtml(item.id) + "')});";
-  if (arts.branch) artPills += '<span style="' + pillStyle + ';cursor:default">🌿 ' + escapeHtml(arts.branch) + '</span> ';
-  if (arts.plan) artPills += '<span onclick="' + artBackFn + 'planView(\'' + escapeHtml(arts.plan) + '\')" style="' + pillStyle + '">📋 Plan</span> ';
-  if (arts.prd) artPills += '<span onclick="' + artBackFn + 'planView(\'' + escapeHtml(arts.prd) + '\')" style="' + pillStyle + '">📄 PRD</span> ';
-  if (arts.sourcePlan) artPills += '<span onclick="' + artBackFn + 'planView(\'' + escapeHtml(arts.sourcePlan) + '\')" style="' + pillStyle + '">📋 Source Plan</span> ';
+  var branchStyle = 'display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:10px;font-size:var(--text-sm);background:var(--surface2);border:1px solid var(--border);color:var(--text);cursor:default';
+  if (arts.branch) artPills += '<span style="' + branchStyle + '">🌿 ' + escapeHtml(arts.branch) + '</span> ';
+  if (arts.plan) artPills += renderArtifactLink({ type: 'plan', id: arts.plan, label: 'Plan' }) + ' ';
+  if (arts.prd) artPills += renderArtifactLink({ type: 'prd', id: arts.prd, label: 'PRD' }) + ' ';
+  if (arts.sourcePlan) artPills += renderArtifactLink({ type: 'plan', id: arts.sourcePlan, label: 'Source Plan' }) + ' ';
+  // Source chip (item._source) — render when it's a file path that isn't
+  // already represented in arts.plan / arts.prd / arts.sourcePlan.
+  if (item._source && typeof item._source === 'string' && item._source !== 'central') {
+    var sourceAlreadyShown = arts.plan === item._source || arts.prd === item._source || arts.sourcePlan === item._source;
+    if (!sourceAlreadyShown) {
+      var sourceType = item._source.endsWith('.json') ? 'prd' : 'plan';
+      artPills += renderArtifactLink({ type: sourceType, id: item._source, label: 'Source', title: item._source }) + ' ';
+    }
+  }
   if (arts.notes && arts.notes.length > 0) {
     arts.notes.forEach(function(n) {
       var noteFile = (n && typeof n === 'object') ? (n.file || n) : String(n || '');
       if (noteFile.startsWith('kb:')) {
-        var kbParts = noteFile.slice(3).split('/');
-        var kbCat = kbParts[0];
-        var kbFile = kbParts.slice(1).join('/');
+        var kbBody = noteFile.slice(3);
+        var slashIdx = kbBody.indexOf('/');
+        if (slashIdx <= 0) return;
+        var kbFile = kbBody.slice(slashIdx + 1);
         var kbLabel = kbFile.replace(/\.md$/, '').slice(0, 30);
-        artPills += '<span onclick="' + artBackFn + 'kbOpenItem(\'' + escapeHtml(kbCat) + '\',\'' + escapeHtml(kbFile) + '\')" style="' + pillStyle + '">📚 ' + escapeHtml(kbLabel) + '</span> ';
+        artPills += renderArtifactLink({ type: 'kb', id: kbBody, label: kbLabel, title: 'KB: ' + kbFile }) + ' ';
       } else if (noteFile.startsWith('archive:')) {
-        var archLabel = noteFile.slice(8).replace(/\.md$/, '').replace(/^\d{4}-\d{2}-\d{2}-/, '').slice(0, 30);
-        artPills += '<span onclick="' + artBackFn + 'openInboxNote(\'' + escapeHtml(noteFile.slice(8)) + '\')" style="' + pillStyle + ';opacity:0.7">📄 ' + escapeHtml(archLabel) + ' <span style="font-size:var(--text-xs)">(archived)</span></span> ';
+        var archFile = noteFile.slice(8);
+        var archLabel = archFile.replace(/\.md$/, '').replace(/^\d{4}-\d{2}-\d{2}-/, '').slice(0, 30) + ' (archived)';
+        artPills += renderArtifactLink({ type: 'note', id: archFile, label: archLabel, icon: '📄', title: 'Archived note: ' + archFile }) + ' ';
       } else {
         var noteLabel = noteFile.replace(/\.md$/, '').slice(0, 30);
-        artPills += '<span onclick="' + artBackFn + 'openInboxNote(\'' + escapeHtml(noteFile) + '\')" style="' + pillStyle + '">📝 ' + escapeHtml(noteLabel) + '</span> ';
+        artPills += renderArtifactLink({ type: 'note', id: noteFile, label: noteLabel, title: 'Note: ' + noteFile }) + ' ';
       }
     });
   }
   if (artPills) html += field('Artifacts', '<div style="display:flex;flex-wrap:wrap;gap:4px">' + artPills + '</div>');
 
+  // P-34fa5d79 — Mentions: notes whose YAML frontmatter cites this WI
+  // (work_item: / wi: / sourceItem:). Slim string[] field set by
+  // engine/queries.js#getWorkItems from _buildNotesByWiMap. Each entry is
+  // either a bare inbox filename or `archive:<filename>` for archive notes.
+  if (Array.isArray(item._notes) && item._notes.length > 0) {
+    var mentionPills = item._notes.map(function(token) {
+      var isArchive = token.indexOf('archive:') === 0;
+      var fname = isArchive ? token.slice(8) : token;
+      var label = fname.replace(/\.md$/, '').slice(0, 30) + (isArchive ? ' (archived)' : '');
+      return renderArtifactLink({ type: 'note', id: fname, label: label, title: 'Note: ' + fname });
+    }).join(' ');
+    html += field('Mentions', '<div style="display:flex;flex-wrap:wrap;gap:4px">' + mentionPills + '</div>');
+  }
+
   if (item._totalCostUsd != null) html += field('Cumulative Cost', '$' + Number(item._totalCostUsd).toFixed(4));
   if (item._totalInputTokens) html += field('Total Input Tokens', Number(item._totalInputTokens).toLocaleString());
   if (item._totalOutputTokens) html += field('Total Output Tokens', Number(item._totalOutputTokens).toLocaleString());
@@ -856,8 +955,14 @@ function openWorkItemDetail(id) {
       merged.description = full.description || cached.description || '';
       if (Array.isArray(full.acceptanceCriteria)) merged.acceptanceCriteria = full.acceptanceCriteria;
       if (Array.isArray(full.references)) merged.references = full.references;
-      // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escapeHtml() or renderMd() by _wiRenderDetail() (fields: title, description, agent, source, reasons, references, artifacts, PR links)
-      document.getElementById('modal-body').innerHTML = _wiRenderDetail(merged);
+      // P-ce1e5e47 — withTopFrame skips the re-render when the user has
+      // stacked another modal on top of this work-item view.
+      var applyHydration = function() {
+        // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escapeHtml() or renderMd() by _wiRenderDetail() (fields: title, description, agent, source, reasons, references, artifacts, PR links)
+        document.getElementById('modal-body').innerHTML = _wiRenderDetail(merged);
+      };
+      if (typeof withTopFrame === 'function') withTopFrame('wi', id, applyHydration);
+      else applyHydration();
     })
     .catch(function() {
       var desc = document.getElementById('wi-detail-desc');
@@ -895,7 +1000,17 @@ function viewAgentOutput(logPath) {
 
 function openInboxNote(filename) {
   var idx = (inboxData || []).findIndex(function(item) { return item.name === filename; });
-  if (idx >= 0) { openModal(idx); return; }
+  if (idx >= 0) {
+    openModal(idx);
+    // P-34fa5d79 — Source-WI chip for live inbox notes. openModal() above
+    // paints the modal body from inboxData[idx].content; we parse the
+    // frontmatter here and inject a back-link chip when wi: / work_item: /
+    // sourceItem: is present. Append to body so the existing "Add to KB"
+    // button + rendered content stay intact.
+    var live = inboxData[idx];
+    if (live) _wiInjectSourceChipFromFrontmatter(live.content, 'modal-body');
+    return;
+  }
   // Not in the live inbox — it's an archived note (the common case for a
   // completed work item's note pill, which the rewriter re-encodes as an
   // 'archive:<name>' token). Fetch it from notes/archive/ and show it in the
@@ -911,6 +1026,9 @@ function openInboxNote(filename) {
       // eslint-disable-next-line no-unsanitized/property -- reason: renderMd() escapes note content before assembling HTML; filename is set via textContent
       bodyEl.innerHTML = '<div style="font-size:var(--text-md);line-height:1.7;color:var(--muted)">' + renderMd(content) + '</div>';
       document.getElementById('modal').classList.add('open');
+      // P-34fa5d79 — Source-WI chip for archive notes. Same convention as the
+      // live-inbox branch above; parsed off the freshly-fetched content.
+      _wiInjectSourceChipFromFrontmatter(content, 'modal-body');
     })
     .catch(function() {
       closeModal();
@@ -918,6 +1036,29 @@ function openInboxNote(filename) {
     });
 }
 
+// P-34fa5d79 — shared frontmatter → source-WI chip injector. Parses the YAML
+// frontmatter block at the start of `content`, looks for the WI fields the
+// repo uses (work_item / wi / sourceItem), and prepends a renderArtifactLink
+// chip to the named modal body container so the operator can click back to
+// the WI that the note cites. No-op when no frontmatter / no WI field.
+function _wiInjectSourceChipFromFrontmatter(content, containerId) {
+  var bodyEl = document.getElementById(containerId);
+  if (!bodyEl) return;
+  var m = String(content || '').match(/^---\n([\s\S]*?)\n---/);
+  if (!m) return;
+  var fm = {};
+  m[1].split('\n').forEach(function(line) {
+    var lm = line.match(/^([\w-]+):\s*(.*)$/);
+    if (lm) fm[lm[1]] = lm[2].trim();
+  });
+  var wiId = fm.work_item || fm.wi || fm.sourceItem;
+  if (!wiId) return;
+  var chip = renderArtifactLink({ type: 'wi', id: wiId, label: wiId, title: 'Source work item: ' + wiId });
+  var sourceBlock = '<div style="margin-bottom:10px;padding:6px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm)"><span style="color:var(--muted);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:0.5px;margin-right:8px">Source</span>' + chip + '</div>';
+  // eslint-disable-next-line no-unsanitized/method -- reason: structural HTML is a string literal; chip HTML produced by renderArtifactLink() which escapes label + id via escapeHtml
+  bodyEl.insertAdjacentHTML('afterbegin', sourceBlock);
+}
+
 if (typeof window !== 'undefined') {
   window.MinionsWork = { wiRow, renderWorkItems, editWorkItem, submitWorkItemEdit, deleteWorkItem, archiveWorkItem, toggleWorkItemArchive, retryWorkItem, wiPrev, wiNext, feedbackWorkItem, submitFeedback, openCreateWorkItemModal, openWorkItemDetail, openAllWorkItems, viewAgentOutput, openInboxNote, needsAttentionInfo };
 }

package/dashboard/js/state.js

@@ -70,6 +70,10 @@ function _invokePageHooks(names) {
 
 function switchPage(page, pushState) {
   _invokePageHooks(PAGE_LEAVE_HOOKS);
+  // P-ce1e5e47 — page change clears the modal stack and closes any open modal.
+  // Per-modal polls observe withTopFrame and self-stop when the frame goes away.
+  if (typeof resetModalStack === 'function') resetModalStack();
+  if (typeof _physicallyCloseModal === 'function') _physicallyCloseModal();
 
   currentPage = page;
   document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
@@ -109,8 +113,113 @@ function switchPage(page, pushState) {
 
 // Browser back/forward navigation
 window.addEventListener('popstate', (e) => {
-  switchPage(e.state?.page || getPageFromUrl(), false);
+  // P-ce1e5e47 — modal-stack-aware popstate. State shape (per history.pushState
+  // in pushModalFrame / pushModalBack):
+  //   { page: 'home', modal: { breadcrumbs: [{type,id}, ...], current: {type,id} | null } }
+  // The "page" key takes precedence: a real page navigation (sidebar / browser
+  // back across tabs) clears the modal stack entirely.
+  const newPage = e.state?.page || getPageFromUrl();
+  if (newPage !== currentPage) {
+    // Page change wipes any open modal stack.
+    if (typeof resetModalStack === 'function') resetModalStack();
+    if (typeof _physicallyCloseModal === 'function') _physicallyCloseModal();
+    switchPage(newPage, false);
+    return;
+  }
+  // Same page — diff the modal stack and pop frames to match. We compute the
+  // desired total depth from breadcrumbs.length + (current ? 1 : 0).
+  if (typeof _popOneFrameInternal !== 'function' || typeof _modalStackDepth !== 'function') return;
+  const desired = e.state?.modal;
+  const desiredDepth = desired
+    ? (Array.isArray(desired.breadcrumbs) ? desired.breadcrumbs.length : 0) + (desired.current ? 1 : 0)
+    : 0;
+  const currentDepth = _modalStackDepth();
+  if (currentDepth <= desiredDepth) {
+    // No frames to pop. Refresh chrome and bail.
+    if (typeof _updateModalChrome === 'function') _updateModalChrome();
+    return;
+  }
+  _suppressHistoryFromPopstate = true;
+  try {
+    let safety = 0;
+    while (_modalStackDepth() > desiredDepth && safety++ < 32) {
+      _popOneFrameInternal();
+    }
+    if (typeof _updateModalChrome === 'function') _updateModalChrome();
+  } finally {
+    _suppressHistoryFromPopstate = false;
+  }
 });
+
+// P-ce1e5e47 — parse #modal=type:id,type:id,… and return an array of
+// { type, id } frames in bottom→top order. Used both for replay on initial
+// page load and for unit tests of the URL contract.
+// P-3ed68b1e — separator is ',' (was '>'); '>' is in the WHATWG URL
+// fragment percent-encode set and Chromium serialises it as '%3E' on
+// history.pushState — that broke split('>') for every multi-frame hash.
+// We also still accept the legacy '>' / '%3E' separators so any bookmark
+// or in-flight URL from before the fix continues to replay correctly.
+function getModalStackFromUrl() {
+  const hash = window.location.hash || '';
+  const idx = hash.indexOf('modal=');
+  if (idx < 0) return [];
+  const raw = hash.slice(idx + 'modal='.length);
+  if (!raw) return [];
+  const out = [];
+  const parts = raw.split(/,|%3E|>/i);
+  for (let i = 0; i < parts.length; i++) {
+    const seg = parts[i];
+    if (!seg) continue;
+    // type:id — id may contain encoded ':' so split on the first ':' only.
+    const colon = seg.indexOf(':');
+    if (colon < 0) continue;
+    let type, id;
+    try {
+      type = decodeURIComponent(seg.slice(0, colon));
+      id = decodeURIComponent(seg.slice(colon + 1));
+    } catch { continue; }
+    if (!type || !id) continue;
+    out.push({ type, id });
+  }
+  // Cap at MAX (defined in utils.js); take the last N.
+  const cap = (typeof MODAL_STACK_MAX_DEPTH === 'number') ? MODAL_STACK_MAX_DEPTH : 5;
+  return out.length > cap ? out.slice(-cap) : out;
+}
+
+// P-ce1e5e47 — replay the modal stack encoded in the URL hash on initial load.
+// Uses history.replaceState (via pushModalFrame's history call only if we
+// skip it) — we want a single history entry after replay, not N. We achieve
+// this by suppressing pushState for the first N-1 pushes and letting the
+// final push collapse into a replaceState.
+function replayModalStackFromUrl() {
+  const frames = (typeof getModalStackFromUrl === 'function') ? getModalStackFromUrl() : [];
+  if (!frames.length) return;
+  if (typeof openArtifact !== 'function') return;
+  // Suppress per-push pushState during replay; afterward write a single
+  // replaceState that captures the assembled stack.
+  if (typeof _suppressHistoryFromPopstate !== 'undefined') _suppressHistoryFromPopstate = true;
+  try {
+    for (let i = 0; i < frames.length; i++) {
+      try { openArtifact(frames[i].type, frames[i].id); } catch {}
+    }
+  } finally {
+    if (typeof _suppressHistoryFromPopstate !== 'undefined') _suppressHistoryFromPopstate = false;
+  }
+  try {
+    const state = { page: currentPage, modal: _serializeStackForHistory() };
+    history.replaceState(state, '', _buildModalHash());
+  } catch {}
+}
+
+// Kick off replay once the DOM (and all renderer modules) is in place.
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() { try { replayModalStackFromUrl(); } catch {} });
+  } else if (typeof setTimeout !== 'undefined') {
+    // Defer to next tick so all openXxxDetail functions are registered first.
+    setTimeout(function() { try { replayModalStackFromUrl(); } catch {} }, 0);
+  }
+}
 window._prdRequeueUi = window._prdRequeueUi || {};
 
 function getPrdRequeueState(workItemId) {