@beastmode-develeap/beastmode 0.1.19 → 0.1.21

package/dist/web/board.html

@@ -1177,6 +1177,40 @@ input[type="range"]::-webkit-slider-thumb {
 .badge-priority-low { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
 .badge-type { background: rgba(100, 116, 139, 0.15); color: var(--text-secondary); }
 
+/* Overlay status badges — more prominent than standard card-badges */
+.badge-overlay {
+  font-weight: 600;
+  font-size: 0.7rem;
+  letter-spacing: 0.02em;
+}
+.badge-overlay-stuck {
+  background: rgba(248, 113, 113, 0.2);
+  color: #f87171;
+  border: 1px solid rgba(248, 113, 113, 0.4);
+}
+.badge-overlay-awaiting {
+  background: rgba(249, 115, 22, 0.2);
+  color: #f97316;
+  border: 1px solid rgba(249, 115, 22, 0.4);
+}
+
+/* Card-level visual treatment for overlay statuses */
+.kanban-card[data-overlay="stuck"] {
+  background: rgba(248, 113, 113, 0.04);
+  animation: overlay-pulse 3s ease-in-out infinite;
+}
+.kanban-card[data-overlay="awaiting-input"] {
+  background: rgba(249, 115, 22, 0.04);
+  border-left-color: #f97316;
+}
+@keyframes overlay-pulse {
+  0%, 100% { border-left-color: var(--danger); }
+  50% { border-left-color: rgba(248, 113, 113, 0.4); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kanban-card[data-overlay="stuck"] { animation: none; }
+}
+
 /* Board stats bar */
 .board-stats-bar {
   display: flex;
@@ -2643,6 +2677,63 @@ function priorityBadgeClass(priority) {
   return 'badge-priority-low';
 }
 
+function isOverlayStatus(status) {
+  if (!status) return false;
+  const overlays = (typeof PIPELINE_CONFIG !== 'undefined' && PIPELINE_CONFIG && PIPELINE_CONFIG.overlay_statuses)
+    ? PIPELINE_CONFIG.overlay_statuses
+    : ['Stuck', 'Awaiting Input'];
+  return overlays.includes(status);
+}
+
+function overlayBadgeClass(status) {
+  if (!status) return '';
+  const s = status.toLowerCase();
+  if (s === 'stuck') return 'badge-overlay-stuck';
+  if (s === 'awaiting input') return 'badge-overlay-awaiting';
+  return '';
+}
+
+function overlayBadgeLabel(status) {
+  if (!status) return '';
+  const s = status.toLowerCase();
+  if (s === 'stuck') return '\u26A0 Stuck';
+  if (s === 'awaiting input') return '\u23F3 Awaiting Input';
+  return status;
+}
+
+function overlayKey(status) {
+  if (!status) return null;
+  const s = status.toLowerCase();
+  if (s === 'stuck') return 'stuck';
+  if (s === 'awaiting input') return 'awaiting-input';
+  return null;
+}
+
+function overlayTooltip(status) {
+  if (!status) return '';
+  const s = status.toLowerCase();
+  if (s === 'stuck') return 'Task is stuck after max retries. Comment \'reset\' to restart or investigate the failure.';
+  if (s === 'awaiting input') return 'BeastMode needs your answer to a question before continuing. Check the task updates.';
+  return '';
+}
+
+function getEffectivePipelineColumn(item) {
+  if (!isOverlayStatus(item.status)) return item.status;
+  const stages = (typeof getStagesForType === 'function')
+    ? getStagesForType(item.task_type)
+    : [];
+  if (stages.includes('Working on it')) return 'Working on it';
+  if (stages.includes('In Progress')) return 'In Progress';
+  return stages.find(s => s !== 'New' && s !== 'Ready') || item.status;
+}
+
+window.isOverlayStatus = isOverlayStatus;
+window.overlayBadgeClass = overlayBadgeClass;
+window.overlayBadgeLabel = overlayBadgeLabel;
+window.overlayKey = overlayKey;
+window.overlayTooltip = overlayTooltip;
+window.getEffectivePipelineColumn = getEffectivePipelineColumn;
+
 // ── HTML Content Renderer (for Monday.com update bodies) ──
 
 function _sanitizeHtml(raw) {
@@ -3585,6 +3676,7 @@ function BoardPage({ selectedProject }) {
                   : colItems.map(item => html`
                     <div class="kanban-card" key=${item.id}
                          data-status=${col.status}
+                         data-overlay=${overlayKey(item.status) || ''}
                          draggable="true"
                          onDragStart=${e => onDragStart(e, item.id)}
                          onDragEnd=${onDragEnd}>
@@ -3594,6 +3686,7 @@ function BoardPage({ selectedProject }) {
                       <div class="card-id">#${item.id}</div>
                       <div class="card-title" style="cursor:pointer;" onClick=${() => setSelectedItem(item)}>${item.name || item.title}</div>
                       <div class="card-footer">
+                        ${isOverlayStatus(item.status) && html`<span class=${'card-badge badge-overlay ' + overlayBadgeClass(item.status)} title=${overlayTooltip(item.status)}>${overlayBadgeLabel(item.status)}</span>`}
                         ${item.parent_epic && html`<span class="card-badge badge-epic">epic:${item.parent_epic}</span>`}
                         ${item.priority && html`<span class=${'card-badge ' + priorityBadgeClass(item.priority)}>${item.priority}</span>`}
                         ${item.task_type && html`<span class="card-badge badge-type">${item.task_type}</span>`}

package/package.json

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