Added trial history feature

Author: diegochine

client/app.css

@@ -1187,6 +1187,99 @@
   line-height: 1.3;
 }
 
+.bespoke .pl-monitor-actions {
+  margin-top: var(--UI-Spacing-spacing-s);
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Trial history modal */
+/* Override modal content centering for history modal */
+.bespoke .modal-content:has(.pl-history-modal) {
+  align-items: stretch;
+  padding-top: 0;
+  padding-bottom: var(--UI-Spacing-spacing-ml);
+  padding-left: var(--UI-Spacing-spacing-mxl);
+  padding-right: var(--UI-Spacing-spacing-mxl);
+}
+
+.bespoke .pl-history-modal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--UI-Spacing-spacing-m);
+  width: 100%;
+}
+
+.bespoke .pl-history-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--UI-Spacing-spacing-s);
+  padding-bottom: var(--UI-Spacing-spacing-xs);
+  border-bottom: 1px solid var(--Colors-Stroke-Default);
+}
+
+.bespoke .pl-history-toolbar-actions {
+  display: flex;
+  gap: var(--UI-Spacing-spacing-xs);
+}
+
+.bespoke .pl-history-scroller {
+  position: relative;
+  max-height: calc(100vh - 300px);
+  min-height: 200px;
+  overflow: auto;
+  border: 1px solid var(--Colors-Stroke-Default);
+  border-radius: var(--UI-Radius-radius-m);
+  background: var(--Colors-Backgrounds-Main-Top);
+  box-shadow: inset 0 2px 4px var(--Colors-Shadow-Soft);
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
+}
+
+.bespoke .pl-history-viewport {
+  width: 100%;
+}
+
+.bespoke .pl-history-items {
+  position: absolute;
+  inset: 0;
+}
+
+.bespoke .pl-history-row {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 28px;
+  display: grid;
+  grid-template-columns: 84px minmax(0, 1fr);
+  align-items: center;
+  gap: var(--UI-Spacing-spacing-s);
+  padding: 0 var(--UI-Spacing-spacing-m);
+  border-bottom: 1px solid var(--Colors-Stroke-Default);
+  overflow-wrap: anywhere;
+  transition: background-color 0.15s ease;
+}
+
+.bespoke .pl-history-row:hover {
+  background-color: var(--Colors-Backgrounds-Main-Medium);
+}
+
+.bespoke .pl-history-row:last-child {
+  border-bottom: none;
+}
+
+.bespoke .pl-history-trial {
+  color: var(--Colors-Text-Body-Medium);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.bespoke .pl-history-outcome {
+  color: var(--Colors-Text-Body-Default);
+  min-width: 0;
+}
+
 /* Chart context */
 .bespoke .pl-chart-header {
   display: flex;
@@ -1336,4 +1429,4 @@
 
 .bespoke [data-tooltip]:hover::after {
   opacity: 1;
-}
+}

client/app.js

@@ -13,6 +13,8 @@ import simulateTwoTrials from './src/probability-lab/engine/simulate-two.js';
 import { createRunner } from './src/probability-lab/engine/runner.js';
 import render from './src/probability-lab/ui/render.js';
 import { createStore } from './src/probability-lab/state/store.js';
+import { IndexHistory, PackedPairHistory } from './src/probability-lab/state/trial-history.js';
+import { createHistoryView } from './src/probability-lab/ui/history-view.js';
 import NumericSlider from './design-system/components/numeric-slider/numeric-slider.js';
 
 function $(id) {
@@ -58,6 +60,15 @@ const els = {
   deviceView: $('pl-device-view'),
   trials: $('pl-trials'),
   last: $('pl-last'),
+  historyButton: $('pl-history'),
+  historyModal: $('pl-history-modal'),
+  historySummary: $('pl-history-summary'),
+  historyEmpty: $('pl-history-empty'),
+  historyScroller: $('pl-history-scroller'),
+  historyViewport: $('pl-history-viewport'),
+  historyItems: $('pl-history-items'),
+  historyJumpTop: $('pl-history-jump-top'),
+  historyJumpLatest: $('pl-history-jump-latest'),
 
   barChart: $('pl-bar-chart'),
   lineChart: $('pl-line-chart'),
@@ -87,6 +98,8 @@ const sliderInstances = {
 // Store speed slider instance
 let speedSlider = null;
 let settingsModal = null;
+let historyModal = null;
+let historyView = null;
 
 /**
  * Generates a random numeric seed string for the RNG
@@ -137,6 +150,7 @@ const store = createStore({
     counts: [],
     lastIndex: null,
     history: [],
+    trialHistory: new IndexHistory(),
     eventSelected: new Set(),
   },
 
@@ -165,6 +179,7 @@ const store = createStore({
     lastA: null,
     lastB: null,
     selectedCell: null,
+    trialHistory: new PackedPairHistory(),
   },
 });
 
@@ -176,6 +191,9 @@ const runner = createRunner(store.getState().running, {
     const state = store.getState();
     render(els, state);
     applyVisibility(state);
+    if (historyModal?.isOpen && historyView) {
+      historyView.sync(state, { preserveScroll: true });
+    }
     activityLogger.maybeLogStatus(state);
   },
   onDone: updateControls,
@@ -210,6 +228,7 @@ function resetSingleSimulation() {
     draft.single.counts = Array(def.labels.length).fill(0);
     draft.single.lastIndex = null;
     draft.single.history = [];
+    draft.single.trialHistory?.clear();
     draft.single.eventSelected = filtered;
   });
 
@@ -247,6 +266,7 @@ function resetTwoSimulation() {
     draft.two.lastA = null;
     draft.two.lastB = null;
     draft.two.selectedCell = null;
+    draft.two.trialHistory?.clear();
   });
 }
 
@@ -269,6 +289,9 @@ function resetSimulation({ reason = 'unknown', logSettings = false } = {}) {
   render(els, store.getState());
   applyVisibility(store.getState());
   syncUiFromState();
+  if (historyModal?.isOpen && historyView) {
+    historyView.sync(store.getState(), { scrollToLatest: true });
+  }
 
   const currentState = store.getState();
   if (logSettings) {
@@ -800,6 +823,42 @@ function initSettingsModal() {
   }
 }
 
+function initHistoryModal() {
+  if (historyModal) return;
+  if (!els.historyModal) return;
+
+  const modalContent = els.historyModal;
+  const wasHidden = modalContent.hidden;
+  modalContent.hidden = true;
+
+  historyModal = new Modal({
+    size: 'medium',
+    title: 'Trial History',
+    content: modalContent,
+    onOpen: () => {
+      if (historyView) historyView.sync(store.getState(), { scrollToLatest: true });
+    },
+  });
+
+  if (wasHidden) modalContent.hidden = false;
+
+  historyView = createHistoryView({
+    summaryEl: els.historySummary,
+    emptyEl: els.historyEmpty,
+    scrollerEl: els.historyScroller,
+    viewportEl: els.historyViewport,
+    itemsEl: els.historyItems,
+    jumpTopButton: els.historyJumpTop,
+    jumpLatestButton: els.historyJumpLatest,
+  });
+
+  if (els.historyButton) {
+    els.historyButton.addEventListener('click', () => {
+      historyModal.open();
+    });
+  }
+}
+
 function syncUiFromState() {
   const state = store.getState();
   els.stepSize.value = String(state.stepSize);
@@ -887,6 +946,7 @@ function updateTwoControlsForRelationship() {
 
 function initEventListeners() {
   initSettingsModal();
+  initHistoryModal();
 
   els.spinnerSectors.addEventListener('change', () => {
     const clamped = clamp(parseInt(els.spinnerSectors.value, 10), 2, 12);
@@ -1057,6 +1117,9 @@ function initEventListeners() {
     const state = store.getState();
     render(els, state);
     applyVisibility(state);
+    if (historyModal?.isOpen && historyView) {
+      historyView.sync(state, { preserveScroll: true });
+    }
   });
 }
 

client/config.json

@@ -5,7 +5,7 @@
     "name": "Exam",
     "icon": "📚",
     "outcomes": ["Pass", "Fail"],
-    "probabilities": [0.7, 0.3]
+    "probabilities": [0.5, 0.5]
   },
   "visualElements": {
     "editExperimentButton": true,

client/index.html

@@ -161,9 +161,31 @@ <h2 class="heading-xsmall">Live Trial</h2>
               </div>
             </div>
           </div>
+          <div class="pl-monitor-actions">
+            <button id="pl-history" class="button button-secondary button-small" type="button" disabled aria-haspopup="dialog" aria-controls="pl-history-modal">
+              History
+            </button>
+          </div>
         </section>
       </div>
 
+      <div id="pl-history-modal" class="pl-history-modal" hidden>
+        <div class="pl-history-toolbar">
+          <div id="pl-history-summary" class="body-xsmall pl-muted">Trials: 0</div>
+          <div class="pl-history-toolbar-actions">
+            <button id="pl-history-jump-top" class="button button-tertiary button-small" type="button">Top</button>
+            <button id="pl-history-jump-latest" class="button button-tertiary button-small" type="button">Latest</button>
+          </div>
+        </div>
+
+        <div id="pl-history-empty" class="body-small pl-muted">No trials yet. Run a trial to start building history.</div>
+
+        <div id="pl-history-scroller" class="pl-history-scroller" hidden>
+          <div id="pl-history-viewport" class="pl-history-viewport"></div>
+          <div id="pl-history-items" class="pl-history-items" role="list"></div>
+        </div>
+      </div>
+
       <div id="pl-settings-modal" class="pl-settings-modal" hidden>
         <p class="pl-helper-text body-xsmall">Changing settings resets trials for the current experiment.</p>
 

client/src/probability-lab/engine/simulate-single.js

@@ -17,12 +17,14 @@ import { sampleIndex } from '../domain/cdf.js';
 export default function simulateSingleTrials(stateSlice, rng, count) {
   const def = stateSlice.definition;
   if (!def) return;
+  const trialHistory = stateSlice.trialHistory;
 
   for (let i = 0; i < count; i += 1) {
     const idx = sampleIndex(rng, def.cdf);
     stateSlice.counts[idx] += 1;
     stateSlice.trials += 1;
     stateSlice.lastIndex = idx;
+    if (trialHistory) trialHistory.push(idx);
   }
 
   if (stateSlice.trials > 0) {
@@ -33,4 +35,3 @@ export default function simulateSingleTrials(stateSlice, rng, count) {
     }
   }
 }
-

client/src/probability-lab/engine/simulate-two.js

@@ -56,6 +56,7 @@ export default function simulateTwoTrials(stateSlice, rng, count) {
   if (!defA || !defB) return;
 
   const relationship = stateSlice.relationship;
+  const trialHistory = stateSlice.trialHistory;
 
   for (let i = 0; i < count; i += 1) {
     const a = sampleIndex(rng, defA.cdf);
@@ -88,6 +89,6 @@ export default function simulateTwoTrials(stateSlice, rng, count) {
     stateSlice.trials += 1;
     stateSlice.lastA = a;
     stateSlice.lastB = b;
+    if (trialHistory) trialHistory.pushPair(a, b);
   }
 }
-