@beastmode-develeap/beastmode 0.1.363 → 0.1.365

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260605-015717-0e94f70";</script>
+<script>window.__BUILD_STAMP__ = "20260605-034414-4ae0705";</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">
@@ -9947,6 +9947,14 @@ function SettingsPage() {
 
   const [restartFields, setRestartFields] = useState(new Set());
 
+  // Cost knobs (feature #888): the highest-cost in-flight item, shown next to
+  // the per_item_usd_cap field so the operator can pick a sensible ceiling.
+  const [costsByItems, setCostsByItems] = useState(null);
+  // FR-2 hot-reload confirmation: the `cost` category is AUTO-reloaded by the
+  // daemon (no restart), so after a save we surface "Reloading…" then
+  // "Applied at HH:MM:SS" instead of a restart badge.
+  const [costReload, setCostReload] = useState(null);
+
   useEffect(() => {
     api('GET', '/api/config')
       .then(setConfig)
@@ -9954,6 +9962,15 @@ function SettingsPage() {
       .finally(() => setLoading(false));
   }, []);
 
+  useEffect(() => {
+    // Not board-scoped: we want the global highest-cost item regardless of the
+    // project filter. Swallow errors — the indicator falls back to "—".
+    fetch('/api/costs/by-items')
+      .then(r => r.ok ? r.json() : {})
+      .then(data => setCostsByItems(data || {}))
+      .catch(() => setCostsByItems({}));
+  }, []);
+
   useEffect(() => {
     api('GET', '/api/daemon/reload-categories')
       .then(data => {
@@ -10007,6 +10024,15 @@ function SettingsPage() {
       setConfig(result);
       setSuccess('Configuration saved');
       setTimeout(() => setSuccess(null), 3000);
+
+      // FR-2: the cost category hot-reloads without a restart. Show a brief
+      // "Reloading…" then a timestamped "Applied" so the operator knows the
+      // new ceiling is live, not pending a daemon bounce.
+      setCostReload('reloading');
+      setTimeout(() => {
+        const t = new Date().toLocaleTimeString([], { hour12: false });
+        setCostReload({ appliedAt: t });
+      }, 700);
     } catch (e) { setError(e.message); }
     setSaving(false);
   };
@@ -10044,6 +10070,17 @@ function SettingsPage() {
   const cost = config.cost || {};
   const humanGates = config.human_gates || {};
 
+  // FR-3: highest in-flight item cost, used as a reference point next to the
+  // per_item_usd_cap field. costsByItems is keyed by item id → { total_cost_usd }.
+  // null = still loading; {} = loaded but no data → show "—".
+  const highestItemCost = costsByItems
+    ? Object.values(costsByItems).reduce(
+        (max, c) => Math.max(max, (c && c.total_cost_usd) || 0), 0)
+    : null;
+  const highestItemCostLabel = (highestItemCost && highestItemCost > 0)
+    ? (formatCost(highestItemCost) || '$' + highestItemCost.toFixed(2))
+    : '—';
+
   // Build model options dynamically from whatever the config actually uses,
   // plus well-known model families. No more hardcoding — when Anthropic
   // releases a new model, it shows up as soon as someone sets it in config.
@@ -10232,13 +10269,44 @@ function SettingsPage() {
         </div>
       </div>
 
-      <!-- Cost Section -->
+      <!-- Cost Section. The "cost" category hot-reloads (ReloadCategory.AUTO),
+           so it carries NO RestartBadge — instead saveConfig surfaces an
+           inline "Reloading / Applied at HH:MM:SS" confirmation (FR-2). -->
       <div class="settings-section">
-        <h3 style="display:flex;align-items:center;gap:8px">Cost Optimization <${RestartBadge} field="cost" restartFields=${restartFields} /></h3>
+        <h3 style="display:flex;align-items:center;gap:8px">
+          Cost Optimization
+          ${costReload === 'reloading'
+            ? html`<span style="font-size:12px;color:#888;font-weight:normal">⏳ Reloading…</span>`
+            : (costReload && costReload.appliedAt)
+              ? html`<span style="font-size:12px;color:#16a34a;font-weight:normal">✅ Applied at ${costReload.appliedAt}</span>`
+              : null}
+        </h3>
+
+        <!-- Per-item USD cap (FR-3/FR-5): hard spend ceiling per item. -->
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">Per-Item Cost Cap (USD)</div>
+            <div class="setting-desc">Hard ceiling on Claude cost per item in USD. Set to 0 to disable. When exceeded, the item transitions to Stuck on next dispatch.</div>
+            <div class="setting-desc" style="margin-top:4px">Current item with highest cost: ${highestItemCostLabel}</div>
+          </div>
+          <div class="setting-control">
+            <input type="number" class="form-input" min="0" max="10000" step="1" style="width:90px;text-align:center"
+                   placeholder="50"
+                   value=${cost.per_item_usd_cap !== undefined ? cost.per_item_usd_cap : ''}
+                   onInput=${e => {
+                     const raw = e.target.value;
+                     if (raw === '') { updateField('cost.per_item_usd_cap', undefined); return; }
+                     const v = parseFloat(raw);
+                     updateField('cost.per_item_usd_cap', Number.isFinite(v) ? Math.max(0, Math.min(10000, v)) : undefined);
+                   }} />
+            ${cost.per_item_usd_cap === undefined ? html`<span style="font-size:11px;color:#aaa;font-style:italic">(default)</span>` : null}
+          </div>
+        </div>
+
         <div class="setting-row">
           <div>
             <div class="setting-label">Model Tiering</div>
-            <div class="setting-desc">Use cheaper models for iterations</div>
+            <div class="setting-desc">Use cheaper models for cheaper sub-tasks.</div>
           </div>
           <div class="setting-control">
             <label class="toggle-switch">
@@ -10246,12 +10314,14 @@ function SettingsPage() {
                      onChange=${e => updateField('cost.model_tiering_enabled', e.target.checked)} />
               <span class="toggle-slider"></span>
             </label>
+            ${cost.model_tiering_enabled === undefined ? html`<span style="font-size:11px;color:#aaa;font-style:italic">(default)</span>` : null}
           </div>
         </div>
+
         <div class="setting-row">
           <div>
             <div class="setting-label">Incremental Verification</div>
-            <div class="setting-desc">Only re-run failed scenarios</div>
+            <div class="setting-desc">Re-verify only changed scenarios between iterations.</div>
           </div>
           <div class="setting-control">
             <label class="toggle-switch">
@@ -10259,19 +10329,112 @@ function SettingsPage() {
                      onChange=${e => updateField('cost.incremental_verification', e.target.checked)} />
               <span class="toggle-slider"></span>
             </label>
+            ${cost.incremental_verification === undefined ? html`<span style="font-size:11px;color:#aaa;font-style:italic">(default)</span>` : null}
+          </div>
+        </div>
+
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">Full Re-Verify Interval</div>
+            <div class="setting-desc">Run a full re-verification every N iterations.</div>
+          </div>
+          <div class="setting-control">
+            <input type="number" class="form-input" min="1" max="20" style="width:80px;text-align:center"
+                   placeholder="3"
+                   value=${cost.full_reverify_interval !== undefined ? cost.full_reverify_interval : ''}
+                   onInput=${e => {
+                     const raw = e.target.value;
+                     if (raw === '') { updateField('cost.full_reverify_interval', undefined); return; }
+                     updateField('cost.full_reverify_interval', parseInt(raw) || 3);
+                   }} />
+            ${cost.full_reverify_interval === undefined ? html`<span style="font-size:11px;color:#aaa;font-style:italic">(default)</span>` : null}
           </div>
         </div>
+
+        <!-- Build Check toggle (FR-6): disabling needs an explicit confirm so a
+             broken build can't silently slip past verification. -->
         <div class="setting-row">
           <div>
             <div class="setting-label">Build Check</div>
-            <div class="setting-desc">Run build before verification</div>
+            <div class="setting-desc">Whether to run the build/compile check between iterations.</div>
           </div>
           <div class="setting-control">
             <label class="toggle-switch">
               <input type="checkbox" checked=${cost.build_check_enabled !== false}
-                     onChange=${e => updateField('cost.build_check_enabled', e.target.checked)} />
+                     onChange=${e => {
+                       if (!e.target.checked && !window.confirm('Disable the build check? Broken builds will no longer be caught before verification.')) {
+                         e.target.checked = true; return;
+                       }
+                       updateField('cost.build_check_enabled', e.target.checked);
+                     }} />
+              <span class="toggle-slider"></span>
+            </label>
+            ${cost.build_check_enabled === undefined ? html`<span style="font-size:11px;color:#aaa;font-style:italic">(default)</span>` : null}
+          </div>
+        </div>
+
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">Build Command</div>
+            <div class="setting-desc">Shell command used for the incremental build check.</div>
+          </div>
+          <div class="setting-control">
+            <input type="text" class="form-input" style="width:180px"
+                   placeholder="npm run build"
+                   value=${cost.build_check_command !== undefined ? cost.build_check_command : ''}
+                   onInput=${e => updateField('cost.build_check_command', e.target.value || undefined)} />
+            ${cost.build_check_command === undefined ? html`<span style="font-size:11px;color:#aaa;font-style:italic">(default)</span>` : null}
+          </div>
+        </div>
+
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">Build Timeout (seconds)</div>
+            <div class="setting-desc">Timeout in seconds for the build check command.</div>
+          </div>
+          <div class="setting-control">
+            <input type="number" class="form-input" min="1" max="3600" style="width:90px;text-align:center"
+                   placeholder="90"
+                   value=${cost.build_check_timeout_seconds !== undefined ? cost.build_check_timeout_seconds : ''}
+                   onInput=${e => {
+                     const raw = e.target.value;
+                     if (raw === '') { updateField('cost.build_check_timeout_seconds', undefined); return; }
+                     updateField('cost.build_check_timeout_seconds', parseInt(raw) || 90);
+                   }} />
+            ${cost.build_check_timeout_seconds === undefined ? html`<span style="font-size:11px;color:#aaa;font-style:italic">(default)</span>` : null}
+          </div>
+        </div>
+
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">NLSpec Pre-Check</div>
+            <div class="setting-desc">Cheap NLSpec compliance precheck before full verify.</div>
+          </div>
+          <div class="setting-control">
+            <label class="toggle-switch">
+              <input type="checkbox" checked=${cost.nlspec_precheck_enabled !== false}
+                     onChange=${e => updateField('cost.nlspec_precheck_enabled', e.target.checked)} />
               <span class="toggle-slider"></span>
             </label>
+            ${cost.nlspec_precheck_enabled === undefined ? html`<span style="font-size:11px;color:#aaa;font-style:italic">(default)</span>` : null}
+          </div>
+        </div>
+
+        <!-- NLSpec pre-check model (FR-6): a fixed dropdown, no free text. -->
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">NLSpec Pre-Check Model</div>
+            <div class="setting-desc">Model used for the NLSpec precheck.</div>
+          </div>
+          <div class="setting-control">
+            <select class="form-input" style="width:220px"
+                    value=${cost.nlspec_precheck_model || 'claude-haiku-4-5-20251001'}
+                    onChange=${e => updateField('cost.nlspec_precheck_model', e.target.value)}>
+              ${[...new Set([cost.nlspec_precheck_model || 'claude-haiku-4-5-20251001', ...MODEL_OPTIONS])]
+                .filter(Boolean)
+                .map(m => html`<option key=${m} value=${m}>${m}</option>`)}
+            </select>
+            ${cost.nlspec_precheck_model === undefined ? html`<span style="font-size:11px;color:#aaa;font-style:italic">(default)</span>` : null}
           </div>
         </div>
       </div>

package/dist/web/build-commit.txt

@@ -1 +1 @@
-0e94f70ebfc456dfddb4d1473f699f340e9d67af
+4ae0705a9bfd26f4f9f724535b2c9a1b8b6ac051

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260605-015717-0e94f70
+20260605-034414-4ae0705

package/package.json

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