@beastmode-develeap/beastmode 0.1.206 → 0.1.207

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260509-103000-fd3a02c";</script>
+<script>window.__BUILD_STAMP__ = "20260509-122800-7350789";</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;
@@ -5172,7 +5203,7 @@ function SupersededModal({ item, onConfirm, onCancel }) {
 
 // ── 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);
@@ -5187,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);
 
@@ -5208,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.
@@ -5535,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;">
@@ -6931,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 @@
-fd3a02ca51716afc9999e6cc4441295cc82987c0
+7350789bf2ce5bca2ca226ac0e7e8f656012caf4

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260509-103000-fd3a02c
+20260509-122800-7350789

package/package.json

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