@beastmode-develeap/beastmode 0.1.203 → 0.1.204

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260509-101824-acec518";</script>
+<script>window.__BUILD_STAMP__ = "20260509-102609-7aa0839";</script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -1522,6 +1522,37 @@ input[type="range"]::-webkit-slider-thumb {
   margin: 0 -8px;
   padding: 8px;
 }
+/* Audit Trail — Superseded transition history (Story 6) */
+.audit-timeline { display: flex; flex-direction: column; gap: 8px; }
+.audit-entry {
+  background: var(--bg-input);
+  border-radius: 8px;
+  padding: 10px 12px;
+  border-left: 3px solid var(--accent);
+}
+.audit-entry-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+.audit-actor { font-weight: 600; font-size: 13px; }
+.audit-time { color: var(--text-muted); font-size: 12px; }
+.audit-entry-body { font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
+.audit-from { color: var(--text-muted); }
+.audit-successor a, .audit-cascade a {
+  color: var(--accent);
+  text-decoration: none;
+}
+.audit-successor a:hover, .audit-cascade a:hover { text-decoration: underline; }
+.audit-reason {
+  margin-top: 4px;
+  padding: 6px 8px;
+  background: var(--bg-secondary);
+  border-radius: 4px;
+  font-style: italic;
+  color: var(--text-secondary);
+}
 .btn-env-deploy {
   display: inline-flex;
   align-items: center;
@@ -4260,7 +4291,7 @@ const STATUSES = [
   'Waiting for Infra Approval', 'Provisioning Infra', 'Infra Ready',
   'Approved & Merge to Main', 'Ready For Review',
   'Verifying Prod with Tests', 'Verifying Epic', 'Waiting for Epic Bugs', 'Awaiting Input',
-  'Epic Breakdown Posted', 'Stuck', 'Done',
+  'Epic Breakdown Posted', 'Stuck', 'Done', 'Superseded',
 ];
 
 const KANBAN_COLUMNS = [
@@ -5095,12 +5126,88 @@ function DeployModal({ envName, refs, loading, item, selectedProject, onClose })
   `;
 }
 
+// ── Superseded Modal ──
+
+function SupersededModal({ item, onConfirm, onCancel }) {
+  const [supersededBy, setSupersededBy] = useState('');
+  const [reason, setReason] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const isEpic = (item.task_type || '').toLowerCase() === 'epic';
+
+  useEffect(() => {
+    const handleEsc = (e) => { if (e.key === 'Escape') onCancel(); };
+    document.addEventListener('keydown', handleEsc);
+    return () => document.removeEventListener('keydown', handleEsc);
+  }, []);
+
+  const handleSubmit = async () => {
+    if (isEpic && !supersededBy.trim()) {
+      setError('Epics require a successor item ID (superseded_by).');
+      return;
+    }
+    if (isEpic && !reason.trim()) {
+      setError('Epics require a supersede reason.');
+      return;
+    }
+    setLoading(true);
+    setError('');
+    try {
+      const payload = { status: 'Superseded' };
+      const extra = {};
+      if (supersededBy.trim()) extra.superseded_by = supersededBy.trim();
+      if (reason.trim()) extra.superseded_reason = reason.trim();
+      if (Object.keys(extra).length > 0) payload.extra_columns = extra;
+      await api('PATCH', '/api/board/items/' + item.id, payload);
+      onConfirm();
+    } catch (err) {
+      setError(err.message || 'Failed to update status');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return html`
+    <div class="deploy-modal-overlay" data-testid="superseded-modal-overlay"
+         onClick=${(e) => { if (e.target === e.currentTarget) onCancel(); }}>
+      <div class="deploy-modal" data-testid="superseded-modal">
+        <h3>Mark as Superseded</h3>
+        <p style="font-size:13px;color:var(--text-muted);margin:0 0 12px;">
+          This action is permanent. Superseded items cannot be reactivated.
+        </p>
+        ${error && html`<div class="error-banner" style="margin-bottom:12px;">${error}</div>`}
+        <label>Successor item ID ${isEpic ? html`<span style="color:var(--danger);">*</span>` : '(optional)'}</label>
+        <input type="text" value=${supersededBy}
+               data-testid="superseded-by-input"
+               placeholder="e.g. 42"
+               onInput=${(e) => setSupersededBy(e.target.value)}
+               style="width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:13px;box-sizing:border-box;" />
+        <label>Reason ${isEpic ? html`<span style="color:var(--danger);">*</span>` : '(optional)'}</label>
+        <textarea value=${reason}
+                  data-testid="superseded-reason-input"
+                  placeholder="Why is this item being superseded?"
+                  onInput=${(e) => setReason(e.target.value)}
+                  style="width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:13px;box-sizing:border-box;resize:vertical;min-height:60px;" />
+        <div class="deploy-modal-actions">
+          <button onClick=${onCancel} disabled=${loading}>Cancel</button>
+          <button class="btn-primary" onClick=${handleSubmit} disabled=${loading}
+                  data-testid="superseded-confirm-btn">
+            ${loading ? 'Updating...' : 'Mark Superseded'}
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
 // ── Item Detail Sidebar ──
 
-function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject }) {
+function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject, allItems, onSelectItem }) {
   const [updates, setUpdates] = useState([]);
   const [loadingUpdates, setLoadingUpdates] = useState(true);
   const [sortNewest, setSortNewest] = useState(true);
+  const [showSupersededModal, setShowSupersededModal] = useState(false);
   // Attachments (Gap 8a — 2026-04-15): list every attachment the
   // board service has for this item, render image types as thumbnails
   // that open in a new tab when clicked.
@@ -5111,6 +5218,7 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject }) {
   const [phaseData, setPhaseData] = useState([]);
   const [envTimeline, setEnvTimeline] = useState(null);
   const [deployModal, setDeployModal] = useState(null);
+  const [auditEvents, setAuditEvents] = useState([]);
   const sidebarRef = useRef(null);
   const topCommentRef = useRef(null);
 
@@ -5132,6 +5240,25 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject }) {
       .catch(() => setEnvTimeline(null));
   }, [item && item.id, item && item.extra && item.extra.current_env]);
 
+  // FR-4: Fetch SupersededTransition audit events for the selected item.
+  // Only fires when the item is in Superseded status — non-Superseded items
+  // never have audit entries and the section is hidden anyway (NFR-4).
+  useEffect(() => {
+    if (!item || item.status !== 'Superseded') {
+      setAuditEvents([]);
+      return;
+    }
+    const proj = selectedProject && selectedProject !== 'all' ? selectedProject : null;
+    const qs = proj ? '?board=' + encodeURIComponent(proj) : '';
+    const sep = qs ? '&' : '?';
+    const url = '/api/events' + qs + sep + 'item_id=' + encodeURIComponent(item.id) +
+      '&type=SupersededTransition';
+    fetch(url)
+      .then(r => r.ok ? r.json() : [])
+      .then(events => setAuditEvents(Array.isArray(events) ? events : []))
+      .catch(() => setAuditEvents([]));
+  }, [item && item.id, item && item.status]);
+
   // Cost summary fetch — keyed on item.id, refreshed alongside the
   // 10-second updates/attachments poll below. The api() helper only
   // auto-scopes /api/board/*, so append ?board=<proj> manually.
@@ -5300,9 +5427,17 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject }) {
       </div>
       <div class="detail-fields">
         <label>Status</label>
-        <select value=${item.status || 'New'} onChange=${async (e) => {
+        <select value=${item.status || 'New'}
+                disabled=${item.status === 'Superseded'}
+                onChange=${async (e) => {
+          const newStatus = e.target.value;
+          if (newStatus === 'Superseded') {
+            e.target.value = item.status || 'New';
+            setShowSupersededModal(true);
+            return;
+          }
           try {
-            await api('PATCH', '/api/board/items/' + item.id, { status: e.target.value });
+            await api('PATCH', '/api/board/items/' + item.id, { status: newStatus });
             onStatusChange();
           } catch (err) { /* ignore */ }
         }}>
@@ -5451,6 +5586,49 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject }) {
           </div>
         </div>
       `}
+      ${item && item.status === 'Superseded' && auditEvents.length > 0 && html`
+        <div class="detail-section" style="padding:12px 24px 0;" data-testid="audit-trail-section">
+          <h4 class="detail-section-title" style="margin:0 0 8px 0;font-size:13px;font-weight:600;">Audit Trail</h4>
+          <div class="audit-timeline">
+            ${auditEvents.map(ev => {
+              const payload = (ev && ev.payload) || {};
+              const isCascade = ev.actor === 'cascade';
+              return html`
+                <div class="audit-entry" key=${ev.id} data-testid="audit-entry">
+                  <div class="audit-entry-header">
+                    <span class="audit-actor" data-testid="audit-actor">${isCascade ? 'Auto-cascaded' : 'Status changed'}</span>
+                    <span class="audit-time" data-testid="audit-time">${timeAgo(ev.timestamp)}</span>
+                  </div>
+                  <div class="audit-entry-body">
+                    <span class="audit-from" data-testid="audit-from-status">From: <strong>${payload.from_status || ''}</strong></span>
+                    ${payload.superseded_by && html`
+                      <span class="audit-successor">
+                        Successor: <a href="#" data-testid="audit-successor-link" onClick=${(e) => {
+                          e.preventDefault();
+                          const target = allItems && allItems.find ? allItems.find(i => String(i.id) === String(payload.superseded_by)) : null;
+                          if (target && onSelectItem) onSelectItem(target);
+                        }}>#${payload.superseded_by}</a>
+                      </span>
+                    `}
+                    ${payload.cascade_source && html`
+                      <span class="audit-cascade">
+                        Cascaded from parent: <a href="#" data-testid="audit-cascade-source" onClick=${(e) => {
+                          e.preventDefault();
+                          const target = allItems && allItems.find ? allItems.find(i => String(i.id) === String(payload.cascade_source)) : null;
+                          if (target && onSelectItem) onSelectItem(target);
+                        }}>#${payload.cascade_source}</a>
+                      </span>
+                    `}
+                    ${payload.superseded_reason && html`
+                      <div class="audit-reason" data-testid="audit-reason">${payload.superseded_reason}</div>
+                    `}
+                  </div>
+                </div>
+              `;
+            })}
+          </div>
+        </div>
+      `}
       ${(loadingAttachments || attachments.length > 0) && html`
         <div style="padding:12px 24px 0;">
           <h4 style="margin:0 0 8px 0;font-size:13px;font-weight:600;">
@@ -5507,6 +5685,11 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject }) {
       selectedProject=${selectedProject}
       onClose=${() => setDeployModal(null)}
     />`}
+    ${showSupersededModal && html`<${SupersededModal}
+      item=${item}
+      onConfirm=${() => { setShowSupersededModal(false); onStatusChange(); }}
+      onCancel=${() => setShowSupersededModal(false)}
+    />`}
   `;
 }
 
@@ -6359,6 +6542,7 @@ function BoardPage({ selectedProject }) {
     e.preventDefault();
     e.currentTarget.classList.remove('drag-over', 'drag-over-invalid');
     e.currentTarget.removeAttribute('title');
+    if (status === 'Superseded') return;
     const di = dragInfoRef.current;
     if (!di) return;
     const validStages = (typeof getStagesForType === 'function')
@@ -6841,7 +7025,7 @@ function BoardPage({ selectedProject }) {
       `}
 
       ${showCreateDialog && html`<${CreateTaskDialog} onClose=${() => setShowCreateDialog(false)} onCreated=${fetchItems} />`}
-      ${selectedItem && html`<${ItemDetailSidebar} item=${selectedItem} selectedProject=${selectedProject} onClose=${() => setSelectedItem(null)} onStatusChange=${() => { fetchItems(); setSelectedItem(null); }} />`}
+      ${selectedItem && html`<${ItemDetailSidebar} item=${selectedItem} selectedProject=${selectedProject} allItems=${items} onSelectItem=${setSelectedItem} onClose=${() => setSelectedItem(null)} onStatusChange=${() => { fetchItems(); setSelectedItem(null); }} />`}
     </div>
   `;
 }

package/dist/web/build-commit.txt

@@ -1 +1 @@
-acec5181b8ac3a2dea78f33581a722e5cbe445b9
+7aa08391228bd7979262a65efcc7e0fa2df66453

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260509-101824-acec518
+20260509-102609-7aa0839

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beastmode-develeap/beastmode",
-  "version": "0.1.203",
+  "version": "0.1.204",
   "description": "BeastMode Dark Factory — turn intent into verified software",
   "type": "module",
   "bin": {