@beastmode-develeap/beastmode 0.1.133 → 0.1.135

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260419-211451-b246bc0";</script>
+<script>window.__BUILD_STAMP__ = "20260420-073821-483e679";</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">
@@ -609,11 +609,12 @@ body {
   content: '';
   position: absolute;
   top: -50%;
-  right: -10%;
-  width: 300px;
-  height: 300px;
-  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
+  right: -20%;
+  width: 250px;
+  height: 250px;
+  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
   pointer-events: none;
+  opacity: 0.6;
 }
 
 .welcome-title {
@@ -1070,6 +1071,39 @@ input[type="range"]::-webkit-slider-thumb {
   padding: 8px;
   flex: 1;
   min-height: 60px;
+  max-height: calc(100vh - 300px);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+}
+
+.kanban-items::-webkit-scrollbar {
+  width: 6px;
+}
+
+.kanban-items::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.kanban-items::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+}
+
+.kanban-items::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+[data-theme="light"] .kanban-items {
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+}
+
+[data-theme="light"] .kanban-items::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+[data-theme="light"] .kanban-items::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.25);
 }
 
 .kanban-card {
@@ -1176,6 +1210,23 @@ input[type="range"]::-webkit-slider-thumb {
   color: var(--text-muted);
   font-family: var(--font-mono);
 }
+/* Status-age badge — time spent in the CURRENT status. Color-coded so
+   operators can scan which items have been waiting/working too long.
+   "ok" fresh, "info" 1-6h, "warn" 6-24h, "stale" 24h+. Designed for
+   the 2026-04-19 "not sure why waiting so long" complaint. */
+.kanban-card .card-status-age {
+  margin-left: auto;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+}
+.card-status-age.status-age-ok { color: var(--text-muted); }
+.card-status-age.status-age-info { color: var(--accent); background: var(--accent-subtle); }
+.card-status-age.status-age-warn { color: #fb923c; background: rgba(249, 115, 22, 0.15); }
+.card-status-age.status-age-stale { color: #f87171; background: rgba(239, 68, 68, 0.15); }
 .card-badge {
   display: inline-block;
   padding: 2px 8px;
@@ -1674,6 +1725,43 @@ input[type="range"]::-webkit-slider-thumb {
 }
 .filter-toggle:hover { border-color: var(--text-muted); color: var(--text); }
 .filter-toggle.active { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
+
+.view-toggle {
+  display: inline-flex;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.view-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 12px;
+  height: 36px;
+  font-size: 13px;
+  font-family: var(--font-sans);
+  font-weight: 500;
+  background: var(--bg-card);
+  color: var(--text-secondary);
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  user-select: none;
+}
+.view-toggle-btn:hover {
+  color: var(--text);
+  background: var(--bg-input);
+}
+.view-toggle-btn.active {
+  background: var(--accent-subtle);
+  color: var(--accent);
+  cursor: default;
+}
+.view-toggle-btn + .view-toggle-btn {
+  border-left: 1px solid var(--border);
+}
+
 .filter-active-count {
   display: inline-flex;
   align-items: center;
@@ -2400,7 +2488,44 @@ input[type="range"]::-webkit-slider-thumb {
    ACTIVITY SIDEBAR (Dashboard)
    ================================================================ */
 
-.activity-list { display: flex; flex-direction: column; gap: 2px; }
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 400px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+}
+
+.activity-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.activity-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.activity-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+}
+
+.activity-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+[data-theme="light"] .activity-list {
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+}
+
+[data-theme="light"] .activity-list::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+[data-theme="light"] .activity-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.25);
+}
 .activity-item {
   padding: 10px 12px;
   border-radius: var(--radius-sm);
@@ -3580,6 +3705,35 @@ function timeAgo(dateString) {
   return months + 'mo ago';
 }
 
+// "In status" age — shorter render (no "ago"), with a severity class
+// so the UI can color-code long waits. Designed for inline card badges:
+// "3h", "2d 5h", "1w". Returns {text, severity} where severity is
+// "ok" (<1h), "info" (<6h), "warn" (<24h), or "stale" (>=24h). Empty
+// dateString returns {text: '', severity: 'ok'} — caller suppresses
+// the badge entirely.
+function statusAge(dateString) {
+  if (!dateString) return { text: '', severity: 'ok' };
+  const now = new Date();
+  const date = new Date(dateString);
+  const totalMin = Math.max(0, Math.floor((now - date) / 60000));
+  let text;
+  if (totalMin < 1) text = 'just now';
+  else if (totalMin < 60) text = totalMin + 'm';
+  else if (totalMin < 1440) text = Math.floor(totalMin / 60) + 'h';
+  else if (totalMin < 10080) {
+    const d = Math.floor(totalMin / 1440);
+    const h = Math.floor((totalMin % 1440) / 60);
+    text = h ? d + 'd ' + h + 'h' : d + 'd';
+  } else {
+    text = Math.floor(totalMin / 10080) + 'w';
+  }
+  let severity = 'ok';
+  if (totalMin >= 60 && totalMin < 360) severity = 'info';
+  else if (totalMin >= 360 && totalMin < 1440) severity = 'warn';
+  else if (totalMin >= 1440) severity = 'stale';
+  return { text, severity };
+}
+
 function priorityBadgeClass(priority) {
   if (!priority) return '';
   const p = priority.toLowerCase();
@@ -4591,7 +4745,16 @@ function PipelineView({
           const label = cost ? formatCost(cost.total_cost_usd) : null;
           return label ? html`<span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span>` : null;
         })()}
-        <span class="card-time">${timeAgo(item.updated_at || item.created_at)}</span>
+        ${(() => {
+          // Time-in-status badge (2026-04-20): answers "how long has
+          // this been waiting?" without the user having to click into
+          // the task. Falls back to updated_at for pre-v5 rows.
+          const src = item.status_changed_at || item.updated_at || item.created_at;
+          const age = statusAge(src);
+          if (!age.text) return null;
+          return html`<span class=${'card-status-age status-age-' + age.severity}
+                           title=${'In status since ' + (src || 'unknown') + ' (updated ' + timeAgo(item.updated_at || item.created_at) + ')'}>${age.text}</span>`;
+        })()}
       </div>
     </div>
   `;
@@ -4826,6 +4989,35 @@ function CollapseAllButton({ allCollapsed, onToggle }) {
   `;
 }
 
+function ViewToggle({ viewMode, onToggle }) {
+  const isPipeline = viewMode === 'pipeline';
+  return html`
+    <div class="view-toggle" data-testid="view-toggle"
+         role="radiogroup" aria-label="View mode">
+      <button
+        class=${'view-toggle-btn' + (!isPipeline ? ' active' : '')}
+        onClick=${() => { if (isPipeline) onToggle(); }}
+        role="radio"
+        aria-checked=${String(!isPipeline)}
+        aria-pressed=${String(!isPipeline)}
+        data-testid="view-toggle-board"
+        title="Board view">
+        Board
+      </button>
+      <button
+        class=${'view-toggle-btn' + (isPipeline ? ' active' : '')}
+        onClick=${() => { if (!isPipeline) onToggle(); }}
+        role="radio"
+        aria-checked=${String(isPipeline)}
+        aria-pressed=${String(isPipeline)}
+        data-testid="view-toggle-pipeline"
+        title="Pipeline view">
+        Pipeline
+      </button>
+    </div>
+  `;
+}
+
 // ── Board Page ──
 
 function BoardPage({ selectedProject }) {
@@ -4852,13 +5044,61 @@ function BoardPage({ selectedProject }) {
   const [columnSorts, setColumnSorts] = useState({});
   const [epicCollapseKey, setEpicCollapseKey] = useState(0);
   const [costsByItem, setCostsByItem] = useState({});
-  const viewMode = (() => {
+  const [viewMode, setViewMode] = useState(() => {
+    try {
+      const saved = localStorage.getItem('beastmode-view-mode');
+      if (saved === 'pipeline' || saved === 'board') return saved;
+    } catch {}
     try {
       const params = new URLSearchParams(window.location.search);
       if (params.get('view') === 'pipeline') return 'pipeline';
     } catch {}
     return 'board';
-  })();
+  });
+
+  useEffect(() => {
+    try {
+      localStorage.setItem('beastmode-view-mode', viewMode);
+    } catch {}
+  }, [viewMode]);
+
+  useEffect(() => {
+    try {
+      const url = new URL(window.location.href);
+      if (viewMode === 'pipeline') {
+        url.searchParams.set('view', 'pipeline');
+      } else {
+        url.searchParams.delete('view');
+      }
+      if (url.href !== window.location.href) {
+        window.history.pushState({ viewMode }, '', url.href);
+      }
+    } catch {}
+  }, [viewMode]);
+
+  useEffect(() => {
+    const onPop = (e) => {
+      try {
+        if (e.state && (e.state.viewMode === 'pipeline' || e.state.viewMode === 'board')) {
+          setViewMode(e.state.viewMode);
+          return;
+        }
+        const saved = localStorage.getItem('beastmode-view-mode');
+        if (saved === 'pipeline' || saved === 'board') {
+          setViewMode(saved);
+          return;
+        }
+        const params = new URLSearchParams(window.location.search);
+        setViewMode(params.get('view') === 'pipeline' ? 'pipeline' : 'board');
+      } catch {}
+    };
+    window.addEventListener('popstate', onPop);
+    return () => window.removeEventListener('popstate', onPop);
+  }, []);
+
+  const toggleView = useCallback(() => {
+    setViewMode(prev => prev === 'board' ? 'pipeline' : 'board');
+  }, []);
 
   const fetchItems = useCallback(() => {
     setLoading(true);
@@ -5024,6 +5264,19 @@ function BoardPage({ selectedProject }) {
   }, []);
 
   const deleteItem = async (id) => {
+    // Confirmation guard (2026-04-20, Agent C finding #10). The card
+    // delete button was a bare onClick — one accidental click and a
+    // task is gone. Add a native confirm() dialog so accidental
+    // mid-drag clicks have an escape hatch. Kept simple (no custom
+    // modal) to avoid touching the existing Preact component tree.
+    const item = items.find(i => String(i.id) === String(id));
+    const title = item ? (item.name || item.title || '(untitled)') : 'this task';
+    const truncated = title.length > 60 ? title.slice(0, 60) + '…' : title;
+    if (!window.confirm('Delete task #' + id + '?\n\n' + truncated +
+        '\n\nThis cannot be undone. Updates, costs, and attachments ' +
+        'will be lost.')) {
+      return;
+    }
     try {
       setError(null);
       await api('DELETE', '/api/board/items/' + id);
@@ -5139,6 +5392,35 @@ function BoardPage({ selectedProject }) {
     };
   }, [activeSwimlanesSet]);
 
+  // Layout test surface: expose column metrics on window for scenario
+  // verification. Guards on !loading and items.length > 0 so metrics are
+  // only exposed once the board has actually rendered content.
+  // requestAnimationFrame defers measurement until after the browser has
+  // painted, ensuring scrollHeight/clientHeight reflect the real layout.
+  useEffect(() => {
+    if (loading || items.length === 0) return;
+    const raf = requestAnimationFrame(() => {
+      const columns = document.querySelectorAll('.kanban-items');
+      if (columns.length === 0) return;
+      const metrics = Array.from(columns).map(col => {
+        const cs = getComputedStyle(col);
+        return {
+          scrollHeight: col.scrollHeight,
+          clientHeight: col.clientHeight,
+          isScrollable: col.scrollHeight > col.clientHeight,
+          hasOverflowAuto: cs.overflowY === 'auto',
+          maxHeight: cs.maxHeight,
+        };
+      });
+      window.__BEASTMODE_BOARD_LAYOUT__ = {
+        columnCount: columns.length,
+        columns: metrics,
+        timestamp: Date.now(),
+      };
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [items, loading]);
+
   const toggleSwimlane = (key) => {
     setActiveSwimlanesSet(prev => {
       const next = new Set(prev);
@@ -5257,7 +5539,7 @@ function BoardPage({ selectedProject }) {
 
       <div class="board-header-row">
         <div class="board-stats-bar">
-          <span class="stat-label">Board</span>
+          <span class="stat-label">${viewMode === 'pipeline' ? 'Pipeline' : 'Board'}</span>
           <span class="stat-item"><strong>${totalItems}</strong>${isFiltered ? '/' + items.length : ''} total</span>
           <span class="stat-item"><strong>${activeItems}</strong> active</span>
           <span class="stat-item" style="color: var(--success);"><strong style="color: var(--success);">${doneItems}</strong> done</span>
@@ -5265,6 +5547,8 @@ function BoardPage({ selectedProject }) {
           <span class="stat-item" style="color: var(--accent);"><strong style="color: var(--accent); font-family: var(--font-mono);">${progressPct}%</strong> complete</span>
         </div>
 
+        <${ViewToggle} viewMode=${viewMode} onToggle=${toggleView} />
+
         <div class="board-search-wrap">
           <input type="text" placeholder="Search tasks..." value=${searchTerm} onInput=${(e) => setSearchTerm(e.target.value)} />
           ${searchTerm && html`<button class="board-search-clear" onClick=${() => setSearchTerm('')}>\u00d7</button>`}
@@ -5438,7 +5722,16 @@ function BoardPage({ selectedProject }) {
                             const label = cost ? formatCost(cost.total_cost_usd) : null;
                             return label ? html`<span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span>` : null;
                           })()}
-                          <span class="card-time">${timeAgo(item.updated_at || item.created_at)}</span>
+                          ${(() => {
+          // Time-in-status badge (2026-04-20): answers "how long has
+          // this been waiting?" without the user having to click into
+          // the task. Falls back to updated_at for pre-v5 rows.
+          const src = item.status_changed_at || item.updated_at || item.created_at;
+          const age = statusAge(src);
+          if (!age.text) return null;
+          return html`<span class=${'card-status-age status-age-' + age.severity}
+                           title=${'In status since ' + (src || 'unknown') + ' (updated ' + timeAgo(item.updated_at || item.created_at) + ')'}>${age.text}</span>`;
+        })()}
                         </div>
                       </div>
                     `;
@@ -8486,7 +8779,7 @@ function App() {
 
 render(html`<${App} />`, document.getElementById('app'));
 </script>
-<div id="build-stamp-footer" style="position:fixed;bottom:4px;right:8px;font-size:10px;color:rgba(255,255,255,0.2);font-family:'JetBrains Mono',monospace;pointer-events:none;z-index:1;user-select:all"></div>
+<div id="build-stamp-footer" style="position:fixed;bottom:4px;right:8px;font-size:10px;color:rgba(255,255,255,0.2);font-family:'JetBrains Mono',monospace;pointer-events:none;z-index:1;user-select:all;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></div>
 <script>if(window.__BUILD_STAMP__){document.getElementById('build-stamp-footer').textContent=window.__BUILD_STAMP__}</script>
 </body>
 </html>

package/dist/web/build-commit.txt

@@ -1 +1 @@
-b246bc0f7d538fb6ed16ab1834d7323cbd6268dd
+483e679664e425769ab39366cf74c472bf72c938

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260419-211451-b246bc0
+20260420-073821-483e679

package/package.json

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