Rewire balance history snapshots to trigger during schedule generation

web/app.js

@@ -1,5 +1,10 @@
 import { DEBUG } from './debug.js';
-import { createRadialUrchin } from './ui/visuals/RadialUrchin.js';
+import {
+  createRadialUrchin,
+  createBalanceHistoryEntry,
+  computeScheduleSignature,
+  MAX_HISTORY_ENTRIES as BALANCE_HISTORY_LIMIT,
+} from './ui/visuals/RadialUrchin.js';
 
 console.info('[app] app.js loaded');
 
@@ -98,6 +103,7 @@ const visualsState = {
   metaBar: null,
   metaSlot: null,
   runLabel: null,
+  balanceHistory: [],
 };
 let lastVisualPayload = null;
 let lastVisualSchedule = null;
@@ -315,6 +321,42 @@ function resolveVisualPayload(payload) {
   return null;
 }
 
+function applyBalanceHistoryToUrchin() {
+  if (!visualsState.urchin || typeof visualsState.urchin.setBalanceHistory !== 'function') {
+    return;
+  }
+  visualsState.urchin.setBalanceHistory(visualsState.balanceHistory);
+}
+
+function appendActivityBalanceSnapshot(schedule) {
+  if (!schedule || typeof schedule !== 'object') {
+    return;
+  }
+  const previous =
+    visualsState.balanceHistory.length > 0
+      ? visualsState.balanceHistory[visualsState.balanceHistory.length - 1]
+      : null;
+  const nextRunNumber =
+    (previous && Number.isFinite(previous.runNumber)
+      ? previous.runNumber
+      : visualsState.balanceHistory.length) + 1;
+  const signature = computeScheduleSignature(schedule);
+  const entry = createBalanceHistoryEntry(schedule, {
+    runNumber: nextRunNumber,
+    highContrast: Boolean(visualsState.urchin?.state?.highContrast),
+    signature,
+  });
+  if (!entry) {
+    return;
+  }
+  const next = [...visualsState.balanceHistory, entry];
+  if (next.length > BALANCE_HISTORY_LIMIT) {
+    next.splice(0, next.length - BALANCE_HISTORY_LIMIT);
+  }
+  visualsState.balanceHistory = next;
+  applyBalanceHistoryToUrchin();
+}
+
 function updateVisuals(payload) {
   lastVisualPayload = payload && typeof payload === 'object' ? payload : null;
   lastVisualSchedule = resolveVisualPayload(payload);
@@ -376,6 +418,7 @@ function updateVisuals(payload) {
       visualsState.metaSlot.hidden = Boolean(visualsState.metaBar?.hidden);
     }
     visualsState.urchin.update({ data: lastVisualSchedule });
+    applyBalanceHistoryToUrchin();
   } catch (error) {
     console.error('[visuals] failed to update radial urchin:', error);
   }
@@ -444,6 +487,7 @@ function maybeCreateUrchinInstance(schedule) {
       instance.attachRunMeta(visualsState.metaBar);
     }
     visualsState.urchin = instance;
+    applyBalanceHistoryToUrchin();
   }
 }
 
@@ -2629,6 +2673,8 @@ async function handleGenerate(event) {
       inputsSnapshot.budget = true;
     }
 
+    appendActivityBalanceSnapshot(result);
+
     recordCalendarHistoryEntry({
       archetype,
       seed: normalizedSeed,

web/ui/visuals/ActivityBalanceHistory.js

@@ -71,10 +71,14 @@ export class ActivityBalanceHistory {
     }
 
     const fragment = document.createDocumentFragment();
-    this.entries.forEach((entry, index) => {
+    const displayEntries = this.entries.slice().reverse();
+    displayEntries.forEach((entry, index) => {
+      const runNumber = Number.isFinite(entry?.runNumber)
+        ? entry.runNumber
+        : this.entries.length - index;
       const badge = document.createElement('span');
       badge.className = 'activity-balance-history__run';
-      badge.textContent = entry.label || `Run #${index + 1}`;
+      badge.textContent = entry.label || `Run #${runNumber}`;
       if (entry.timestampLabel) {
         badge.title = entry.timestampLabel;
       }
@@ -96,7 +100,7 @@ export class ActivityBalanceHistory {
       const bar = document.createElement('div');
       bar.className = 'activity-balance-history__bar';
       bar.setAttribute('role', 'list');
-      bar.dataset.index = String(index);
+      bar.dataset.index = String(runNumber);
       bar.addEventListener('mouseleave', this.boundHideTooltip);
 
       entry.segments.forEach((segment, segmentIndex) => {
@@ -105,7 +109,7 @@ export class ActivityBalanceHistory {
         element.style.setProperty('--segment-color', segment.color || '#6366f1');
         element.style.setProperty('--segment-text-color', computeSegmentTextColor(segment.color));
         element.style.flexGrow = String(segment.minutes);
-        element.dataset.entryIndex = String(index);
+        element.dataset.entryIndex = String(runNumber);
         element.dataset.segmentIndex = String(segmentIndex);
         element.setAttribute('role', 'listitem');
 
@@ -131,7 +135,7 @@ export class ActivityBalanceHistory {
 
       const row = document.createElement('div');
       row.className = 'activity-balance-history__row';
-      row.dataset.index = String(index);
+      row.dataset.index = String(runNumber);
       row.append(labelWrapper, bar);
 
       fragment.append(row);