@beastmode-develeap/beastmode 0.1.121 → 0.1.122

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260418-190841-6b44897";</script>
+<script>window.__BUILD_STAMP__ = "20260418-202811-98d25b2";</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">
@@ -1027,6 +1027,13 @@ input[type="range"]::-webkit-slider-thumb {
   box-shadow: var(--shadow-glow);
 }
 
+.kanban-column.drag-over-invalid {
+  border: 2px dashed var(--danger);
+  background: rgba(248, 113, 113, 0.05);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .kanban-column-header {
   padding: 14px 16px;
   border-bottom: 1px solid var(--border);
@@ -1407,6 +1414,13 @@ input[type="range"]::-webkit-slider-thumb {
   box-shadow: var(--shadow-glow);
 }
 
+.pipeline-column.drag-over-invalid {
+  border: 2px dashed var(--danger);
+  background: rgba(248, 113, 113, 0.05);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .pipeline-column-header {
   padding: 10px 12px;
   border-top: 3px solid var(--col-color, var(--text-muted));
@@ -2620,6 +2634,140 @@ input[type="range"]::-webkit-slider-thumb {
   transition: all 0.15s ease;
 }
 .btn-secondary:hover { background: var(--surface-elevated); border-color: var(--text-muted); }
+
+/* ================================================================
+   COSTS PAGE
+   ================================================================ */
+
+.costs-table-wrapper {
+  overflow-x: auto;
+  overflow-y: visible;
+  -webkit-overflow-scrolling: touch;
+  max-width: 100%;
+}
+
+.costs-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  font-family: var(--font-sans);
+  font-size: 13px;
+}
+
+.costs-th-id { width: 60px; }
+.costs-th-name { width: auto; }
+.costs-th-status { width: 120px; }
+.costs-th-tokens { width: 100px; }
+.costs-th-cost { width: 110px; }
+.costs-th-records { width: 80px; }
+
+.costs-th {
+  text-align: left;
+  padding: 10px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.costs-th:hover {
+  color: var(--accent);
+}
+
+.costs-tr {
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.costs-tr:hover {
+  background: var(--bg-card-hover);
+}
+
+.costs-td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text);
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.costs-td-mono {
+  font-family: var(--font-mono);
+  font-size: 13px;
+}
+
+.costs-td-name {
+  font-weight: 500;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.costs-phase-chart {
+  padding: 16px 0;
+}
+
+.costs-phase-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 16px;
+}
+
+.costs-phase-label {
+  width: 100px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-transform: capitalize;
+  flex-shrink: 0;
+}
+
+.costs-phase-bar-bg {
+  flex: 1;
+  height: 24px;
+  background: var(--accent-subtle);
+  border-radius: var(--radius-xs);
+  overflow: hidden;
+  position: relative;
+}
+
+.costs-phase-bar-fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: 0;
+  transition: width 0.4s ease;
+  min-width: 2px;
+}
+
+.costs-phase-amount {
+  width: 80px;
+  text-align: right;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  flex-shrink: 0;
+}
+
+@media (max-width: 900px) {
+  .costs-phase-label { width: 70px; font-size: 12px; }
+  .costs-phase-amount { width: 60px; font-size: 12px; }
+  .costs-td-name { max-width: 150px; }
+}
+
+@media (max-width: 600px) {
+  .costs-table { font-size: 12px; }
+  .costs-th, .costs-td { padding: 8px 6px; }
+}
 </style>
 </head>
 <body>
@@ -4381,7 +4529,7 @@ function PipelineView({
                        data-testid=${'pipeline-col-' + colId}
                        data-column=${colId}
                        key=${'pc-' + lane.key + '-' + colId}
-                       onDragOver=${onDragOver}
+                       onDragOver=${e => onDragOver(e, colId)}
                        onDragLeave=${onDragLeave}
                        onDrop=${e => onDrop(e, colId)}>
                     <div class="pipeline-column-header"
@@ -4534,7 +4682,7 @@ function BoardPage({ selectedProject }) {
   const [items, setItems] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const [dragId, setDragId] = useState(null);
+  const [dragInfo, setDragInfo] = useState(null);
   const [selectedItem, setSelectedItem] = useState(null);
   const [showCreateDialog, setShowCreateDialog] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -4723,32 +4871,56 @@ function BoardPage({ selectedProject }) {
   };
 
   const onDragStart = (e, id) => {
-    setDragId(id);
+    const item = items.find(i => String(i.id) === String(id));
+    const taskType = (item && item.task_type) ? item.task_type : 'code';
+    setDragInfo({ id, taskType });
     e.dataTransfer.effectAllowed = 'move';
+    try { e.dataTransfer.setData('text/plain', String(id)); } catch {}
     e.target.classList.add('dragging');
   };
 
   const onDragEnd = (e) => {
     e.target.classList.remove('dragging');
-    setDragId(null);
+    setDragInfo(null);
+    document.querySelectorAll('.drag-over, .drag-over-invalid').forEach(el => {
+      el.classList.remove('drag-over', 'drag-over-invalid');
+    });
   };
 
-  const onDragOver = (e) => {
+  const onDragOver = (e, targetColumnId) => {
     e.preventDefault();
-    e.dataTransfer.dropEffect = 'move';
-    e.currentTarget.classList.add('drag-over');
+    if (!dragInfo) return;
+    const validStages = (typeof getStagesForType === 'function')
+      ? getStagesForType(dragInfo.taskType)
+      : [];
+    const isValid = validStages.indexOf(targetColumnId) !== -1;
+    if (isValid) {
+      e.dataTransfer.dropEffect = 'move';
+      e.currentTarget.classList.remove('drag-over-invalid');
+      e.currentTarget.classList.add('drag-over');
+    } else {
+      e.dataTransfer.dropEffect = 'none';
+      e.currentTarget.classList.remove('drag-over');
+      e.currentTarget.classList.add('drag-over-invalid');
+    }
   };
 
   const onDragLeave = (e) => {
-    e.currentTarget.classList.remove('drag-over');
+    e.currentTarget.classList.remove('drag-over', 'drag-over-invalid');
   };
 
   const onDrop = async (e, status) => {
     e.preventDefault();
-    e.currentTarget.classList.remove('drag-over');
-    if (!dragId) return;
+    e.currentTarget.classList.remove('drag-over', 'drag-over-invalid');
+    if (!dragInfo) return;
+    const validStages = (typeof getStagesForType === 'function')
+      ? getStagesForType(dragInfo.taskType)
+      : [];
+    if (validStages.indexOf(status) === -1) return;
+    const current = items.find(i => String(i.id) === String(dragInfo.id));
+    if (current && current.status === status) return;
     try {
-      await api('PATCH', '/api/board/items/' + dragId, { status });
+      await api('PATCH', '/api/board/items/' + dragInfo.id, { status });
       fetchItems();
     } catch (err) { setError(err.message); }
   };
@@ -5000,7 +5172,7 @@ function BoardPage({ selectedProject }) {
           const sortMode = columnSorts[col.id] || '';
           return html`
             <div class="kanban-column" key=${col.id}
-                 onDragOver=${onDragOver}
+                 onDragOver=${e => onDragOver(e, col.id)}
                  onDragLeave=${onDragLeave}
                  onDrop=${e => onDrop(e, col.id)}>
               <div class="kanban-column-header" style=${'--col-color: ' + col.color} title=${col.tooltip} onClick=${() => cycleSort(col.id)}>
@@ -7727,19 +7899,19 @@ function CostsPage({ selectedProject }) {
           <table class="costs-table">
             <thead>
               <tr>
-                <th class="costs-th" onClick=${() => handleSort('id')}>ID${sortIndicator('id')}</th>
-                <th class="costs-th" onClick=${() => handleSort('name')}>Task${sortIndicator('name')}</th>
-                <th class="costs-th" onClick=${() => handleSort('status')}>Status${sortIndicator('status')}</th>
-                <th class="costs-th" onClick=${() => handleSort('tokens')}>Tokens${sortIndicator('tokens')}</th>
-                <th class="costs-th" onClick=${() => handleSort('cost')}>Cost (USD)${sortIndicator('cost')}</th>
-                <th class="costs-th" onClick=${() => handleSort('records')}>Records${sortIndicator('records')}</th>
+                <th class="costs-th costs-th-id" onClick=${() => handleSort('id')}>ID${sortIndicator('id')}</th>
+                <th class="costs-th costs-th-name" onClick=${() => handleSort('name')}>Task${sortIndicator('name')}</th>
+                <th class="costs-th costs-th-status" onClick=${() => handleSort('status')}>Status${sortIndicator('status')}</th>
+                <th class="costs-th costs-th-tokens" onClick=${() => handleSort('tokens')}>Tokens${sortIndicator('tokens')}</th>
+                <th class="costs-th costs-th-cost" onClick=${() => handleSort('cost')}>Cost (USD)${sortIndicator('cost')}</th>
+                <th class="costs-th costs-th-records" onClick=${() => handleSort('records')}>Records${sortIndicator('records')}</th>
               </tr>
             </thead>
             <tbody>
               ${sortedRows.map(row => html`
                 <tr key=${row.id} class="costs-tr" onClick=${() => navigate('#/board?item=' + row.id)}>
                   <td class="costs-td costs-td-mono">#${row.id}</td>
-                  <td class="costs-td costs-td-name">${row.name}</td>
+                  <td class="costs-td costs-td-name" title=${row.name}>${row.name}</td>
                   <td class="costs-td"><span class=${'badge ' + statusBadgeClass(row.status)}>${row.status}</span></td>
                   <td class="costs-td costs-td-mono">${formatTokens(row.totalTokens)}</td>
                   <td class="costs-td costs-td-mono">$${row.costUsd.toFixed(2)}</td>

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260418-190841-6b44897
+20260418-202811-98d25b2

package/package.json

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