@beastmode-develeap/beastmode 0.1.188 → 0.1.189

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260507-132738-7df2598";</script>
+<script>window.__BUILD_STAMP__ = "20260507-140717-1212ed1";</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">
@@ -2979,10 +2979,14 @@ input[type="range"]::-webkit-slider-thumb {
   font-size: 13px;
   font-weight: 500;
   color: var(--text);
-  white-space: nowrap;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 4px;
+  word-break: break-word;
+  line-height: 1.35;
 }
 .activity-meta {
   display: flex;
@@ -2993,6 +2997,8 @@ input[type="range"]::-webkit-slider-thumb {
   font-size: 11px;
   color: var(--text-muted);
   font-family: var(--font-mono);
+  flex-shrink: 0;
+  margin-left: auto;
 }
 .badge-sm {
   display: inline-block;
@@ -3004,6 +3010,100 @@ input[type="range"]::-webkit-slider-thumb {
   font-weight: 500;
   white-space: nowrap;
 }
+.activity-meta .badge-sm {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.activity-list-wrapper {
+  position: relative;
+}
+.activity-list-wrapper::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 24px;
+  background: linear-gradient(transparent, var(--bg-card));
+  pointer-events: none;
+}
+/* Scenario × Environment Matrix */
+.scenario-matrix-wrapper {
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-card);
+}
+.scenario-matrix {
+  width: 100%;
+  font-size: 12px;
+  border-collapse: collapse;
+}
+.scenario-matrix th {
+  text-align: center;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+  background: var(--bg-input);
+  font-weight: 600;
+}
+.scenario-matrix th.scenario-col {
+  text-align: left;
+}
+.scenario-matrix td {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border);
+  text-align: center;
+  vertical-align: middle;
+}
+.scenario-matrix tr:last-child td {
+  border-bottom: none;
+}
+.scenario-matrix td.scenario-name-cell {
+  text-align: left;
+  white-space: nowrap;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.scenario-matrix-id {
+  font-family: var(--font-mono);
+  color: var(--accent);
+  margin-right: 6px;
+}
+.scenario-matrix-included {
+  color: var(--success);
+  font-weight: 700;
+}
+.scenario-matrix-excluded {
+  color: var(--text-muted);
+  opacity: 0.4;
+}
+.scenario-matrix-severity {
+  display: block;
+  font-size: 10px;
+  margin-top: 2px;
+}
+.scenario-matrix-severity.is-override {
+  font-style: italic;
+}
+.scenario-matrix-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+}
+.scenario-matrix-toggle-icon {
+  font-size: 10px;
+  color: var(--text-muted);
+  transition: transform 0.2s;
+  display: inline-block;
+}
+.scenario-matrix-toggle-icon.is-open {
+  transform: rotate(90deg);
+}
 .run-item {
   padding: 10px 12px;
   border-radius: var(--radius-sm);
@@ -4072,6 +4172,7 @@ function DashboardPage({ selectedProject, onProjectChange }) {
               <h3>Recent Activity</h3>
               <span class="badge badge-muted">${recentItems.length}</span>
             </div>
+            <div class="activity-list-wrapper">
             <div class="activity-list">
               ${recentItems.map(item => html`
                 <div class="activity-item" key=${item.id}>
@@ -4084,6 +4185,7 @@ function DashboardPage({ selectedProject, onProjectChange }) {
               `)}
               ${recentItems.length === 0 && html`<div class="empty-text" style="padding:12px;">No recent activity</div>`}
             </div>
+            </div>
           </div>
 
           <div class="card">
@@ -4091,6 +4193,7 @@ function DashboardPage({ selectedProject, onProjectChange }) {
               <h3>Active Runs</h3>
               <span class="badge badge-muted">${activeRuns.length}</span>
             </div>
+            <div class="activity-list-wrapper">
             <div class="activity-list">
               ${activeRuns.map(run => {
                 const cp = run.checkpoint || {};
@@ -4114,6 +4217,7 @@ function DashboardPage({ selectedProject, onProjectChange }) {
               })}
               ${activeRuns.length === 0 && html`<div class="empty-text" style="padding:12px;">No active runs</div>`}
             </div>
+            </div>
           </div>
         </div>
       </div>
@@ -6739,12 +6843,14 @@ function stageLabel(stage, extra) {
   return { label: stage, cls: 'badge-muted' };
 }
 
-function RunDetail({ detail }) {
+function RunDetail({ detail, matrixData, matrixLoading, matrixError, matrixOpen, onToggleMatrix }) {
   const cp = detail.checkpoint || {};
   const stages = cp.completed_stages || [];
   const iterations = detail.iterations || [];
   const prUrl = cp.pr_url || '';
   const itemId = detail.manifest?.item_id || detail.manifest?.monday_item_id || '';
+  const hasOverrides = matrixData && matrixData.scenarios.some(sc => sc.severity_overrides && Object.keys(sc.severity_overrides).length > 0);
+  const sevColorFor = (sev) => sev === 'critical' ? 'var(--danger)' : sev === 'high' ? 'var(--warning)' : sev === 'medium' ? 'var(--accent)' : 'var(--text-muted)';
 
   return html`
     <div>
@@ -6806,6 +6912,68 @@ function RunDetail({ detail }) {
         </div>
       ` : null}
 
+      <!-- Scenario × Environment Matrix -->
+      <div style="margin-bottom:16px;" data-testid="scenario-env-matrix">
+        <div class="scenario-matrix-toggle" onClick=${onToggleMatrix}>
+          <span class=${'scenario-matrix-toggle-icon' + (matrixOpen ? ' is-open' : '')}>▶</span>
+          <span style="font-size:12px;font-weight:600;color:var(--text-secondary);">Scenario × Environment Matrix</span>
+          ${matrixData ? html`<span class="badge badge-muted" style="font-size:10px;">${matrixData.scenarios.length}</span>` : null}
+        </div>
+        ${matrixOpen ? html`
+          <div style="margin-top:12px;">
+            ${matrixLoading ? html`<div style="font-size:12px;color:var(--text-muted);padding:8px 0;">Loading matrix...</div>` : null}
+            ${matrixError ? html`<div class="error-msg">${matrixError}</div>` : null}
+            ${matrixData && matrixData.scenarios.length > 0 ? html`
+              <div class="scenario-matrix-wrapper">
+                <table class="scenario-matrix">
+                  <thead>
+                    <tr>
+                      <th class="scenario-col">Scenario</th>
+                      ${matrixData.environments.map(env => html`
+                        <th key=${env}><span class="badge-sm">${env}</span></th>
+                      `)}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${matrixData.scenarios.map(sc => html`
+                      <tr key=${sc.id}>
+                        <td class="scenario-name-cell" title=${sc.title}>
+                          <span class="scenario-matrix-id">${sc.id}</span>${sc.title}
+                        </td>
+                        ${matrixData.environments.map(env => {
+                          const included = (sc.included_in || []).includes(env);
+                          const sev = (sc.effective_severity && sc.effective_severity[env]) || '';
+                          const isOverride = sc.severity_overrides && Object.prototype.hasOwnProperty.call(sc.severity_overrides, env);
+                          return html`
+                            <td key=${env}>
+                              ${included ? html`
+                                <span class="scenario-matrix-included" aria-label="included">✓</span>
+                                ${sev ? html`
+                                  <span class=${'scenario-matrix-severity' + (isOverride ? ' is-override' : '')}
+                                        style=${'color:' + sevColorFor(sev) + ';'}>
+                                    ${sev}${isOverride ? '*' : ''}
+                                  </span>
+                                ` : null}
+                              ` : html`<span class="scenario-matrix-excluded" aria-label="excluded">—</span>`}
+                            </td>
+                          `;
+                        })}
+                      </tr>
+                    `)}
+                  </tbody>
+                </table>
+              </div>
+              ${hasOverrides ? html`
+                <div style="font-size:10px;color:var(--text-muted);margin-top:6px;font-style:italic;">* severity overridden for this environment</div>
+              ` : null}
+            ` : null}
+            ${matrixData && matrixData.scenarios.length === 0 && !matrixError ? html`
+              <div style="font-size:12px;color:var(--text-muted);padding:8px 0;">No scenarios found for this run.</div>
+            ` : null}
+          </div>
+        ` : null}
+      </div>
+
       <!-- Action Links -->
       <div style="display:flex;gap:8px;flex-wrap:wrap;">
         ${itemId ? html`
@@ -6829,6 +6997,10 @@ function RunsPage({ selectedProject }) {
   const [expandedId, setExpandedId] = useState(null);
   const [detail, setDetail] = useState(null);
   const [pinnedIds, setPinnedIds] = useState({});
+  const [matrixData, setMatrixData] = useState(null);
+  const [matrixLoading, setMatrixLoading] = useState(false);
+  const [matrixError, setMatrixError] = useState(null);
+  const [matrixOpen, setMatrixOpen] = useState(false);
 
   const fetchRuns = () => {
     api('GET', '/api/runs')
@@ -6883,12 +7055,27 @@ function RunsPage({ selectedProject }) {
     if (expandedId === id) {
       setExpandedId(null);
       setDetail(null);
+      setMatrixData(null);
+      setMatrixError(null);
+      setMatrixOpen(false);
       return;
     }
     try {
       const data = await api('GET', '/api/runs/' + id);
       setDetail(data);
       setExpandedId(id);
+      setMatrixData(null);
+      setMatrixError(null);
+      setMatrixLoading(true);
+      const pid = data.manifest?.project_id || 'beastmode';
+      api('GET', '/api/debug/scenario-env-matrix?run_id=' + encodeURIComponent(id) + '&project=' + encodeURIComponent(pid))
+        .then(m => { setMatrixData(m); setMatrixLoading(false); })
+        .catch(e => {
+          const raw = e && e.message ? e.message : 'Failed to load matrix';
+          const msg = /not found/i.test(raw) ? 'Scenario matrix not available for this run' : raw;
+          setMatrixError(msg);
+          setMatrixLoading(false);
+        });
     } catch (e) { setError(e.message); }
   };
 
@@ -6901,7 +7088,14 @@ function RunsPage({ selectedProject }) {
         <p>Pipeline run history</p>
       </div>
 
-      ${error ? html`<div class="error-msg">${error}</div>` : null}
+      ${error ? html`<div class="error-msg" data-testid="runs-error" style="display:flex;align-items:center;">
+        <span style="flex:1;">${error}</span>
+        <button
+          aria-label="Dismiss error"
+          data-testid="runs-error-dismiss"
+          style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:14px;padding:0 4px;line-height:1;margin-left:8px;"
+          onClick=${() => setError(null)}>✕</button>
+      </div>` : null}
 
       ${filteredRuns.length === 0
         ? html`<${EmptyState}
@@ -6965,7 +7159,13 @@ function RunsPage({ selectedProject }) {
                     ${expandedId === run.id && detail ? html`
                       <tr key=${run.id + '-detail'}>
                         <td colspan="7" style="background:var(--surface-elevated);padding:20px;border-left:3px solid var(--accent);">
-                          <${RunDetail} detail=${detail} />
+                          <${RunDetail}
+                            detail=${detail}
+                            matrixData=${matrixData}
+                            matrixLoading=${matrixLoading}
+                            matrixError=${matrixError}
+                            matrixOpen=${matrixOpen}
+                            onToggleMatrix=${() => setMatrixOpen(o => !o)} />
                         </td>
                       </tr>
                     ` : null}

package/dist/web/build-commit.txt

@@ -1 +1 @@
-7df25988ddaa9d1ea904d9eb6b672a24e207014b
+1212ed162ede891b7a1d226aafb9cf88d90c02b0

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260507-132738-7df2598
+20260507-140717-1212ed1

package/package.json

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