@yemi33/minions 0.1.2245 → 0.1.2247

package/dashboard/slim/js/plans.js

@@ -0,0 +1,550 @@
+
+  // ── Plans + PRD control panel ──────────────────────────────────────
+  // Two-tab cockpit box over the plan lifecycle: Plans (the .md drafts and
+  // their current lifecycle state) and PRD (the materialized PRDs with their
+  // work items, verify task, and linked PRs). Reuses the classic dashboard's
+  // existing endpoints — NO new server routes:
+  //   Plans — /api/plans (list), /api/plans/:file (read a draft), and the
+  //           lifecycle POSTs /api/plans/{approve,execute,reject,pause,
+  //           regenerate,archive,delete,unarchive}.
+  //   PRD   — /api/prd (progress.items × PRs × verify), with the .json entries
+  //           from /api/plans for the per-PRD lifecycle status, and
+  //           /api/work-items for the verify task row.
+  //
+  // This file is the renderer only: it defines openPlansModal / renderPlansTab /
+  // renderPlansTile / loadPlansCounts and the lifecycle actions, and exposes
+  // them in the shared slim IIFE scope. The tile→modal binding, modal-close
+  // wiring, tab-click wiring, and the status.js tile count call are wired by the
+  // companion wire-up (modals-tiles.js / status.js) — this file does not bind
+  // the tile or the modal itself.
+
+  var _plansActiveTab = 'plans';
+  var _plansData = null;          // cached /api/plans payload (array)
+  var _prdData = null;            // cached /api/prd payload ({ progress, status })
+  var _plansVerifyWis = null;     // cached verify work items (itemType === 'verify')
+  var _plansCount = 0;            // last-known active plan + PRD count (tile)
+
+  // Plan statuses that count as "active" (in-flight / needs attention) for the
+  // tile indicator. A draft that has been converted to a PRD reports status
+  // 'converted' and is excluded here — its PRD carries the live status instead —
+  // so a plan + its PRD are never double-counted.
+  var PLAN_TERMINAL_STATUSES = { completed: 1, converted: 1, rejected: 1 };
+  function _isActivePlanStatus(s) { return !!s && !PLAN_TERMINAL_STATUSES[s]; }
+
+  var PLAN_STATUS_LABELS = {
+    completed: 'Completed', dispatched: 'In Progress', converting: 'Converting',
+    converted: 'Has PRD', paused: 'Paused', 'awaiting-approval': 'Awaiting Approval',
+    approved: 'Approved', rejected: 'Rejected', 'revision-requested': 'Revision Requested',
+    'has-failures': 'Has Failures', active: 'Active', draft: 'Draft',
+  };
+  // Map a plan/PRD status onto a reusable .tile-chip color class.
+  function _planStatusChipClass(s) {
+    if (s === 'completed' || s === 'approved') return 'green';
+    if (s === 'dispatched' || s === 'converting' || s === 'converted') return 'blue';
+    if (s === 'awaiting-approval' || s === 'paused' || s === 'revision-requested') return 'amber';
+    if (s === 'rejected' || s === 'has-failures') return 'red';
+    return '';
+  }
+  // Map a work-item status (done / in-progress / missing / paused / …) onto a
+  // .tile-chip color class.
+  function _wiStatusChipClass(s) {
+    if (s === 'done' || s === 'decomposed') return 'green';
+    if (s === 'in-progress') return 'blue';
+    if (s === 'paused' || s === 'blocked') return 'amber';
+    if (s === 'failed') return 'red';
+    return '';
+  }
+  function _chipClassAttr(cls) { return 'tile-chip' + (cls ? ' ' + cls : ''); }
+
+  // ── Cockpit tile ───────────────────────────────────────────────────
+  // Repaints the Plans tile. Called from status.js's render path and from the
+  // lazy count loader. The count is the number of active (non-terminal,
+  // non-archived) plan + PRD entries.
+  function renderPlansTile(count) {
+    if (typeof count === 'number') _plansCount = count;
+    var n = (typeof _plansCount === 'number') ? _plansCount : 0;
+    var detail = n === 0 ? 'no active plans' : (n + ' active · drafts & PRDs');
+    updateTile('plans', n, detail, n ? 'blue' : null);
+  }
+
+  function _countActivePlans(plans) {
+    if (!Array.isArray(plans)) return 0;
+    var c = 0;
+    for (var i = 0; i < plans.length; i++) {
+      var p = plans[i];
+      if (p && !p.archived && _isActivePlanStatus(p.status)) c++;
+    }
+    return c;
+  }
+
+  // Best-effort lazy fetch of the plan list to compute the tile count, mirroring
+  // knowledge.js#loadKnowledgeCounts. A transient failure leaves the last-known
+  // count untouched.
+  async function loadPlansCounts() {
+    try {
+      var res = await fetch('/api/plans', { headers: { 'Accept': 'application/json' } });
+      if (res.ok) {
+        _plansData = await res.json();
+        renderPlansTile(_countActivePlans(_plansData));
+        return;
+      }
+    } catch (e) { /* keep last-known */ }
+    renderPlansTile();
+  }
+
+  // ── Modal open/close + tab switching ───────────────────────────────
+  function openPlansModal() {
+    var modal = document.getElementById('slim-plans-modal');
+    if (!modal) return;
+    renderPlansTab();
+    modal.classList.add('open');
+  }
+  function closePlansModal() {
+    var modal = document.getElementById('slim-plans-modal');
+    if (modal) modal.classList.remove('open');
+  }
+  function setPlansTab(tab) {
+    _plansActiveTab = tab;
+    var tabs = document.querySelectorAll('#slim-plans-tabs .kn-tab');
+    var activeTabId = null;
+    for (var i = 0; i < tabs.length; i++) {
+      var isActive = tabs[i].getAttribute('data-plans-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-plans-body');
+    if (body && activeTabId) body.setAttribute('aria-labelledby', activeTabId);
+    renderPlansTab();
+  }
+  function renderPlansTab() {
+    var body = document.getElementById('slim-plans-body');
+    if (!body) return;
+    body.textContent = '';
+    if (_plansActiveTab === 'prd') renderPlansPrdTab(body);
+    else renderPlansPlansTab(body);
+  }
+
+  function _plansMsg(text, color) {
+    var msg = document.getElementById('slim-plans-msg');
+    if (!msg) return;
+    msg.style.color = color || 'var(--muted)';
+    msg.textContent = text || '';
+  }
+
+  // ── Tab: Plans (lifecycle view, one card per source draft) ─────────
+  function renderPlansPlansTab(body) {
+    var intro = document.createElement('p');
+    intro.textContent = 'Plan drafts and their lifecycle. Approve to use the materialized PRD as-is, Execute to (re)generate a PRD, or Archive when done.';
+    body.appendChild(intro);
+
+    var msg = document.createElement('div');
+    msg.id = 'slim-plans-msg';
+    msg.className = 'kn-msg';
+    body.appendChild(msg);
+
+    var list = document.createElement('div');
+    list.id = 'slim-plans-list';
+    body.appendChild(list);
+
+    if (_plansData) renderPlansList(list);
+    else {
+      var loading = document.createElement('div');
+      loading.className = 'tile-empty';
+      loading.textContent = 'Loading plans…';
+      list.appendChild(loading);
+    }
+    // Always refresh on open so newly-created/converted plans appear.
+    fetch('/api/plans', { headers: { 'Accept': 'application/json' } })
+      .then(function(r) { return r.ok ? r.json() : null; })
+      .then(function(data) {
+        if (!data) return;
+        _plansData = data;
+        renderPlansTile(_countActivePlans(_plansData));
+        if (_plansActiveTab === 'plans') {
+          var lw = document.getElementById('slim-plans-list');
+          if (lw) renderPlansList(lw);
+        }
+      })
+      .catch(function() { /* keep cached */ });
+  }
+
+  // Build the logical lifecycle cards: one per non-archived .md draft, plus any
+  // non-archived PRD whose source draft isn't itself listed (directly-created
+  // PRDs). Each card resolves its effective status + action target from the
+  // linked PRD when one exists.
+  function _buildPlanCards(plans) {
+    var drafts = [];
+    var prds = [];
+    for (var i = 0; i < plans.length; i++) {
+      var p = plans[i];
+      if (!p || p.archived) continue;
+      if (p.format === 'prd') prds.push(p);
+      else drafts.push(p);
+    }
+    var prdBySource = {};
+    for (var j = 0; j < prds.length; j++) {
+      if (prds[j].sourcePlan) prdBySource[prds[j].sourcePlan] = prds[j];
+    }
+    var cards = [];
+    var claimedPrd = {};
+    for (var k = 0; k < drafts.length; k++) {
+      var d = drafts[k];
+      var linked = prdBySource[d.file] || null;
+      if (linked) claimedPrd[linked.file] = true;
+      cards.push({
+        draftFile: d.file,
+        prdFile: linked ? linked.file : '',
+        target: linked ? linked.file : d.file,
+        summary: d.summary || d.file,
+        project: d.project || '',
+        status: linked ? (linked.status || 'active') : (d.status || 'draft'),
+        generatedBy: d.generatedBy || (linked && linked.generatedBy) || '',
+        generatedAt: d.generatedAt || (linked && linked.generatedAt) || '',
+        itemCount: linked ? linked.itemCount : d.itemCount,
+        planStale: !!(linked && linked.planStale),
+        archiveReady: !!(linked && linked.archiveReady),
+        requiresApproval: linked ? !!linked.requiresApproval : false,
+        readFile: d.file,
+      });
+    }
+    // Directly-created PRDs with no listed source draft.
+    for (var m = 0; m < prds.length; m++) {
+      var pr = prds[m];
+      if (claimedPrd[pr.file]) continue;
+      cards.push({
+        draftFile: pr.file,
+        prdFile: pr.file,
+        target: pr.file,
+        summary: pr.summary || pr.file,
+        project: pr.project || '',
+        status: pr.status || 'active',
+        generatedBy: pr.generatedBy || '',
+        generatedAt: pr.generatedAt || '',
+        itemCount: pr.itemCount,
+        planStale: !!pr.planStale,
+        archiveReady: !!pr.archiveReady,
+        requiresApproval: !!pr.requiresApproval,
+        readFile: pr.file,
+      });
+    }
+    cards.sort(function(a, b) { return (b.generatedAt || '').localeCompare(a.generatedAt || ''); });
+    return cards;
+  }
+
+  function renderPlansList(listWrap) {
+    listWrap.textContent = '';
+    var cards = _buildPlanCards(_plansData || []);
+    if (!cards.length) {
+      var empty = document.createElement('div');
+      empty.className = 'tile-empty';
+      empty.textContent = 'No active plans. Drafts you create land here for approval and execution.';
+      listWrap.appendChild(empty);
+      return;
+    }
+    cards.forEach(function(card) { listWrap.appendChild(buildPlanRow(card)); });
+  }
+
+  function buildPlanRow(card) {
+    var row = document.createElement('div');
+    row.className = 'kb-row';
+
+    var top = document.createElement('div');
+    top.className = 'kb-row-top';
+
+    var chip = document.createElement('span');
+    chip.className = _chipClassAttr(_planStatusChipClass(card.status));
+    chip.textContent = PLAN_STATUS_LABELS[card.status] || card.status;
+    top.appendChild(chip);
+
+    var title = document.createElement('span');
+    title.className = 'kb-row-title';
+    title.textContent = card.summary;
+    title.title = card.summary;
+    top.appendChild(title);
+    row.appendChild(top);
+
+    var meta = document.createElement('div');
+    meta.className = 'kb-row-meta';
+    var metaBits = [];
+    if (card.project) metaBits.push(card.project);
+    if (typeof card.itemCount === 'number') metaBits.push(card.itemCount + ' item' + (card.itemCount === 1 ? '' : 's'));
+    if (card.generatedBy) metaBits.push(card.generatedBy);
+    if (card.generatedAt) metaBits.push(card.generatedAt);
+    if (card.planStale) metaBits.push('STALE');
+    meta.textContent = metaBits.join(' · ');
+    row.appendChild(meta);
+
+    // Action buttons. Clicking the row (away from a button) opens the draft.
+    var actions = document.createElement('div');
+    actions.className = 'kn-toolbar kn-toolbar-end';
+    actions.addEventListener('click', function(ev) { ev.stopPropagation(); });
+
+    var status = card.status;
+    var awaitingApproval = status === 'awaiting-approval' || (card.requiresApproval && status !== 'completed' && status !== 'rejected' && status !== 'dispatched');
+    if (awaitingApproval) {
+      actions.appendChild(_planActionBtn('Approve', 'btn-primary', function() { plansApprove(card.target); }));
+      actions.appendChild(_planActionBtn('Reject', 'btn-secondary', function() { plansReject(card.target); }));
+    } else if (status === 'paused') {
+      actions.appendChild(_planActionBtn('Resume', 'btn-primary', function() { plansApprove(card.target); }));
+    } else if (status === 'dispatched') {
+      actions.appendChild(_planActionBtn('Pause', 'btn-secondary', function() { plansPause(card.target); }));
+    }
+    // Execute: a draft with no PRD yet (re)generates one.
+    if (!card.prdFile && (status === 'draft' || status === 'active')) {
+      actions.appendChild(_planActionBtn('Execute', 'btn-primary', function() { plansExecute(card.draftFile, card.project); }));
+    }
+    actions.appendChild(_planActionBtn(card.archiveReady ? '✓ Archive' : 'Archive', 'btn-secondary', function() { plansArchive(card.target); }));
+    actions.appendChild(_planActionBtn('Delete', 'btn-secondary', function() { plansDelete(card.draftFile); }));
+    row.appendChild(actions);
+
+    row.addEventListener('click', function() { openPlanDraft(card.readFile); });
+    return row;
+  }
+
+  function _planActionBtn(label, cls, onClick) {
+    var b = document.createElement('button');
+    b.className = cls;
+    b.type = 'button';
+    b.textContent = label;
+    b.addEventListener('click', function(ev) { ev.stopPropagation(); onClick(); });
+    return b;
+  }
+
+  // Read a plan draft (.md markdown or .json PRD) into a <pre>.
+  async function openPlanDraft(file) {
+    var body = document.getElementById('slim-plans-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 plans';
+    backBtn.addEventListener('click', function() { renderPlansTab(); });
+    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/plans/' + encodeURIComponent(file));
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      var text = await res.text();
+      pre.textContent = text;
+    } catch (e) {
+      pre.textContent = 'Failed to load plan: ' + (e && e.message ? e.message : e);
+    }
+  }
+
+  // ── Lifecycle actions (POST to existing endpoints, then refresh) ───
+  async function _plansPost(endpoint, payload, pending) {
+    _plansMsg(pending || 'Working…', 'var(--muted)');
+    try {
+      var res = await fetch(endpoint, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      var d = await res.json().catch(function() { return {}; });
+      if (!res.ok) throw new Error(d.error || ('HTTP ' + res.status));
+      _plansMsg('Done.', 'var(--green)');
+      await refreshPlans();
+      return true;
+    } catch (e) {
+      _plansMsg('Error: ' + (e && e.message ? e.message : 'failed'), 'var(--red)');
+      return false;
+    }
+  }
+  function plansApprove(file) { return _plansPost('/api/plans/approve', { file: file }, 'Approving…'); }
+  function plansExecute(file, project) { return _plansPost('/api/plans/execute', { file: file, project: project || '' }, 'Executing…'); }
+  function plansReject(file) { return _plansPost('/api/plans/reject', { file: file }, 'Rejecting…'); }
+  function plansPause(file) { return _plansPost('/api/plans/pause', { file: file }, 'Pausing…'); }
+  function plansRegenerate(source) { return _plansPost('/api/plans/regenerate', { source: source }, 'Regenerating…'); }
+  function plansUnarchive(file) { return _plansPost('/api/plans/unarchive', { file: file }, 'Restoring…'); }
+  function plansArchive(file) { return _plansPost('/api/plans/archive', { file: file }, 'Archiving…'); }
+  async function plansDelete(file) {
+    if (typeof window !== 'undefined' && window.confirm && !window.confirm('Delete this plan and clean up its work items?')) return false;
+    return _plansPost('/api/plans/delete', { file: file }, 'Deleting…');
+  }
+
+  // Re-fetch the plan list (cache-busting the local copy), update the tile, and
+  // re-render whichever tab is active.
+  async function refreshPlans() {
+    try {
+      var res = await fetch('/api/plans', { headers: { 'Accept': 'application/json' } });
+      if (res.ok) {
+        _plansData = await res.json();
+        renderPlansTile(_countActivePlans(_plansData));
+      }
+    } catch (e) { /* keep cached */ }
+    if (_plansActiveTab === 'plans') {
+      var lw = document.getElementById('slim-plans-list');
+      if (lw) renderPlansList(lw);
+    } else {
+      _prdData = null;
+      renderPlansTab();
+    }
+  }
+
+  // ── Tab: PRD (materialized PRDs × work items × verify × PRs) ────────
+  function renderPlansPrdTab(body) {
+    var intro = document.createElement('p');
+    intro.textContent = 'Materialized PRDs — each plan item, its status, linked PRs, and the verify task.';
+    body.appendChild(intro);
+
+    var list = document.createElement('div');
+    list.id = 'slim-prd-list';
+    body.appendChild(list);
+
+    var loading = document.createElement('div');
+    loading.className = 'tile-empty';
+    loading.textContent = 'Loading PRDs…';
+    list.appendChild(loading);
+
+    Promise.all([
+      fetch('/api/prd', { headers: { 'Accept': 'application/json' } }).then(function(r) { return r.ok ? r.json() : null; }).catch(function() { return null; }),
+      fetch('/api/work-items', { headers: { 'Accept': 'application/json' } }).then(function(r) { return r.ok ? r.json() : null; }).catch(function() { return null; }),
+    ]).then(function(results) {
+      _prdData = results[0];
+      _plansVerifyWis = Array.isArray(results[1])
+        ? results[1].filter(function(w) { return w && w.itemType === 'verify'; })
+        : [];
+      if (_plansActiveTab !== 'prd') return;
+      var lw = document.getElementById('slim-prd-list');
+      if (lw) renderPrdList(lw);
+    });
+  }
+
+  function renderPrdList(listWrap) {
+    listWrap.textContent = '';
+    var progress = _prdData && _prdData.progress;
+    var items = progress && Array.isArray(progress.items) ? progress.items : [];
+    if (!items.length) {
+      var empty = document.createElement('div');
+      empty.className = 'tile-empty';
+      empty.textContent = 'No materialized PRDs yet. Execute a plan from the Plans tab to generate one.';
+      listWrap.appendChild(empty);
+      return;
+    }
+    // Group items by their source PRD file (preserve first-seen order).
+    var groups = [];
+    var bySource = {};
+    items.forEach(function(it) {
+      var src = it.source || '(unknown)';
+      if (!bySource[src]) {
+        bySource[src] = { source: src, summary: it.planSummary || src, status: it.planStatus || 'active', items: [] };
+        groups.push(bySource[src]);
+      }
+      bySource[src].items.push(it);
+    });
+    groups.forEach(function(g) { listWrap.appendChild(buildPrdGroup(g)); });
+  }
+
+  function buildPrdGroup(g) {
+    var wrap = document.createElement('div');
+    wrap.className = 'kb-row';
+
+    var head = document.createElement('div');
+    head.className = 'kb-row-top';
+    var chip = document.createElement('span');
+    chip.className = _chipClassAttr(_planStatusChipClass(g.status));
+    chip.textContent = PLAN_STATUS_LABELS[g.status] || g.status;
+    head.appendChild(chip);
+    var title = document.createElement('span');
+    title.className = 'kb-row-title';
+    title.textContent = g.summary;
+    title.title = g.source;
+    head.appendChild(title);
+    wrap.appendChild(head);
+
+    var done = g.items.filter(function(i) { return i.status === 'done' || i.status === 'decomposed'; }).length;
+    var meta = document.createElement('div');
+    meta.className = 'kb-row-meta';
+    meta.textContent = g.source + ' · ' + done + '/' + g.items.length + ' done';
+    wrap.appendChild(meta);
+
+    // Per-item rows.
+    g.items.forEach(function(it) { wrap.appendChild(buildPrdItemRow(it)); });
+
+    // Verify task row, if a verify work item exists for this PRD.
+    var verify = (_plansVerifyWis || []).filter(function(w) { return w.sourcePlan === g.source; });
+    if (verify.length) {
+      verify.forEach(function(w) {
+        var vrow = document.createElement('div');
+        vrow.className = 'kb-row-meta';
+        var vchip = document.createElement('span');
+        vchip.className = _chipClassAttr(_wiStatusChipClass(w.status));
+        vchip.textContent = 'Verify: ' + (w.status || 'pending');
+        vrow.appendChild(vchip);
+        wrap.appendChild(vrow);
+      });
+    }
+    return wrap;
+  }
+
+  function buildPrdItemRow(it) {
+    var row = document.createElement('div');
+    row.className = 'kb-row-meta';
+    row.style.display = 'flex';
+    row.style.alignItems = 'center';
+    row.style.gap = '6px';
+    row.style.flexWrap = 'wrap';
+
+    var chip = document.createElement('span');
+    chip.className = _chipClassAttr(_wiStatusChipClass(it.status));
+    chip.textContent = it.status || 'missing';
+    row.appendChild(chip);
+
+    var name = document.createElement('span');
+    name.textContent = it.name || it.id || '(item)';
+    name.style.color = 'var(--text)';
+    row.appendChild(name);
+
+    (it.projects || []).forEach(function(p) {
+      var pb = document.createElement('span');
+      pb.className = 'tile-chip';
+      pb.textContent = p;
+      row.appendChild(pb);
+    });
+
+    (it.prs || []).forEach(function(pr) { row.appendChild(_buildPlansPrLink(pr)); });
+    return row;
+  }
+
+  function _buildPlansPrLink(pr) {
+    var icon = pr.status === 'merged' ? '✓' : pr.status === 'abandoned' ? '✗' : '○';
+    var span = document.createElement('span');
+    span.style.display = 'inline-flex';
+    span.style.alignItems = 'center';
+    span.style.gap = '3px';
+    span.style.marginLeft = '4px';
+    var dot = document.createElement('span');
+    dot.textContent = icon;
+    dot.title = pr.status || 'active';
+    dot.style.color = pr.status === 'merged' ? 'var(--green)' : pr.status === 'abandoned' ? 'var(--red)' : 'var(--blue)';
+    span.appendChild(dot);
+    if (pr.url) {
+      var a = document.createElement('a');
+      a.href = pr.url;
+      a.target = '_blank';
+      a.rel = 'noopener';
+      a.textContent = pr.id || 'PR';
+      a.title = (pr.title || '') + ' (' + (pr.status || 'active') + ')';
+      span.appendChild(a);
+    } else {
+      var code = document.createElement('code');
+      code.textContent = pr.id || 'PR';
+      span.appendChild(code);
+    }
+    return span;
+  }

package/dashboard/slim/js/status.js

@@ -155,6 +155,13 @@
     var pinned = Array.isArray(data.pinned) ? data.pinned : [];
     if (typeof renderKnowledgeTile === 'function') renderKnowledgeTile(pinned.length);
 
+    // ── Plans tile (drafts + materialized PRDs) ───────────────────
+    // The plan/PRD count is not part of the /api/status snapshot, so this
+    // repaints the tile from the renderer's last-known cached count (seeded by
+    // the lazy loadPlansCounts fetch in modals-tiles.js#bindPlansUi and
+    // refreshed on each modal open / lifecycle action).
+    if (typeof renderPlansTile === 'function') renderPlansTile();
+
     // ── Team member cards ──────────────────────────────────────
     renderMembers(Array.isArray(data.agents) ? data.agents : []);
 

package/dashboard/slim/styles.css

@@ -744,7 +744,7 @@
 
     /* Knowledge control panel (slim-knowledge-modal): Pinned Context / Notes /
        KB tabs in one box. Reuses .tile-* and .pinned-row primitives. */
-    .slim-knowledge-modal-inner { width: 720px; max-width: calc(100vw - 32px); }
+    .slim-knowledge-modal-inner, .slim-plans-modal-inner { width: 720px; max-width: calc(100vw - 32px); }
     .kn-tabs { display: flex; gap: 6px; margin-left: 16px; }
     .kn-tab {
       border: 1px solid var(--border);
@@ -990,9 +990,10 @@
     .cockpit-grid > [data-tile="queued"],
     .cockpit-grid > [data-tile="dispatches"],
     .cockpit-grid > [data-tile="prs"] { grid-column: span 2; }
-    /* Row 3: Watches | Knowledge — two equal columns (3 of 6 each). */
+    /* Row 3: Watches | Knowledge | Plans — three equal columns (2 of 6 each). */
     .cockpit-grid > [data-tile="watches"],
-    .cockpit-grid > [data-tile="knowledge"] { grid-column: span 3; }
+    .cockpit-grid > [data-tile="knowledge"],
+    .cockpit-grid > [data-tile="plans"] { grid-column: span 2; }
     .cockpit-tile {
       background: var(--surface2);
       border: 1px solid var(--border);

package/dashboard-build.js

@@ -71,7 +71,7 @@ function buildDashboardHtml() {
 // original single-file source) inside the wrapper that layout.html provides.
 const SLIM_JS_ORDER = [
   'helpers', 'settings', 'link-pr', 'chat', 'projects',
-  'command-send', 'status', 'members', 'modals-tiles', 'history', 'pinned', 'knowledge',
+  'command-send', 'status', 'members', 'modals-tiles', 'history', 'pinned', 'knowledge', 'plans',
 ];
 
 // Cache for the assembled slim source fragments (layout/css/body/js). Keyed on

package/docs/slim-ux/architecture-suggestions.md

@@ -151,6 +151,16 @@ Risky because plan resume logic depends on reading the PRD JSON twin.
 be re-verified. **Recommendation: defer until at least one round of slim UX shows the unified
 "Plans" button is the right primitive.**
 
+**Update (shipped, lighter form).** The slim UX now ships the *unified surface* half of this
+proposal without the risky storage/document merge: a single **Plans** cockpit tile opens a tabbed
+**Plans / PRD** modal (`dashboard/slim/body.html` `#slim-plans-modal`, rendered by
+`dashboard/slim/js/plans.js`). Plan and PRD remain two stores / two `/api/*` surfaces under the
+hood — the modal just presents them behind one entry point with two tabs, reusing the existing
+`/api/plans*`, `/api/prd`, and `/api/work-items` endpoints (no new routes). This realizes the "slim
+shows one Plans primitive" mental-model win while leaving the document-merge and materializer
+changes deferred as above. Documented in [`concepts.md`](./concepts.md) §3 Plan / §4 PRD under
+"Slim dashboard."
+
 ---
 
 ## 6. Notes + KB + Pinned: which survives?

package/docs/slim-ux/concepts.md

@@ -129,6 +129,19 @@ flow is: human (or agent) writes plan → human approves → `plan-to-prd` agent
 **Existing dashboard.** `dashboard/pages/plans.html` — plan browser, approve / reject / archive
 buttons.
 
+**Slim dashboard.** A **Plans** cockpit tile (`data-tile="plans"` in `dashboard/slim/body.html`)
+opens `#slim-plans-modal` — a two-tab control panel (**Plans** / **PRD**) rendered lazily by
+`dashboard/slim/js/plans.js` into `#slim-plans-body`. The **Plans** tab lists the `.md` drafts with
+their status and wires the lifecycle actions (approve / execute / archive at minimum, plus reject /
+pause / regenerate / delete / unarchive) to the **existing** `GET /api/plans`, `GET /api/plans/:file`,
+and the `POST /api/plans/*` endpoints — **no new server routes** are added. The tile's count is
+fetched lazily via `GET /api/plans` (`loadPlansCounts`), *not* from `/api/status` (the status
+snapshot carries no plans/PRD count). The whole surface lives under `dashboard/slim/` and is gated
+solely by the **`slim-ux`** feature flag — there is **no new `engine.*` flag or Settings-parity
+toggle**; Slim itself is the gate. The renderer exposes `openPlansModal` / `renderPlansTab` /
+`renderPlansTile` / `loadPlansCounts` in the shared Slim IIFE scope; tile→modal/tab binding is wired
+by `modals-tiles.js` + `status.js`.
+
 **Endpoints (`dashboard.js` lines 6952–6963).**
 - `GET  /api/plans` (6952) — list .md drafts + .json PRDs
 - `POST /api/plans/trigger-verify` (6953)
@@ -170,6 +183,13 @@ item has acceptance criteria, complexity, dependencies, and a status (`missing |
 PRD items and their states. Recent feature: PRD graph view at parity with list view (commit
 `b4767d2d`).
 
+**Slim dashboard.** The same `#slim-plans-modal` (opened from the Plans cockpit tile) carries a
+**PRD** tab rendered by `dashboard/slim/js/plans.js`, mirroring the classic PRD view: it lists
+materialized PRDs with their work items, the verify task, and linked PRs. Reads use the **existing**
+`GET /api/prd`, `GET /api/plans` (the `.json` entries, for per-PRD lifecycle status), and
+`GET /api/work-items` (the verify row) — no new routes. See **§3 Plan → Slim dashboard** for the
+shared tile/modal, lazy-count source, and `slim-ux`-only gating (no new `engine.*` flag).
+
 **Endpoints (`dashboard.js`).**
 - `POST /api/prd-items` (6968) — create PRD item
 - `POST /api/prd-items/update` (6969)