From 3a71cd3cf239426deffe105d0cbd9273ace4598d Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Sun, 18 Jan 2026 10:32:01 -0500
Subject: [PATCH 01/11] Move immutable input data to the global "insights"
 store

---
 .../mixtape/core/insights/insightsTabs.js     | 98 +++++--------------
 .../mixtape/core/insights/rewardsFrequency.js |  4 +-
 .../core/insights/rewardsOverTimeDecomp.js    | 12 +--
 .../mixtape/core/js/alpine_insights_store.js  | 58 +++++++++--
 .../core/insights/action_v_frequency.html     |  6 +-
 .../insights/action_v_reward_frequency.html   |  6 +-
 .../templates/core/insights/clustering.html   | 54 +++-------
 .../templates/core/insights/episode_info.html |  2 +-
 .../insights/partials/_tabs_overview.html     | 21 ++--
 .../core/insights/rewards_over_time.html      | 16 +--
 .../templates/core/insights/timeline.html     | 10 +-
 11 files changed, 125 insertions(+), 162 deletions(-)

diff --git a/mixtape/core/static/mixtape/core/insights/insightsTabs.js b/mixtape/core/static/mixtape/core/insights/insightsTabs.js
index 1329c6e..08841ae 100644
--- a/mixtape/core/static/mixtape/core/insights/insightsTabs.js
+++ b/mixtape/core/static/mixtape/core/insights/insightsTabs.js
@@ -2,22 +2,8 @@ document.addEventListener('alpine:init', () => {
   Alpine.data('insightsTabs', () => ({
     // initial state
     active: 'Overview',
-    parsedData: null,
-    clustering: null,
-    episodesCount: null,
-    agentsCount: null,
     maxStepsCount: null,
     avgRewardDisplay: null,
-    actionVReward: {},
-    rewardHistogram: [],
-    actionVFrequency: {},
-    rewardsOverTime: [],
-    decomposedRewards: [],
-    uniqueAgents: [],
-    episodeIds: [],
-    stepData: [],
-    timelineKeySteps: [],
-    timelineKeyStepsGlobal: [],
     currentStep: 0,
     maxSteps: 0,
     maxStepsGlobal: 0,
@@ -27,8 +13,6 @@ document.addEventListener('alpine:init', () => {
     limitToEpisode: false,
     debug: false,
     playing: false,
-    multiKey: '',
-    clusteringAvailable: false,
     pollTimer: null,
     showToast: false,
     toastText: '',
@@ -42,41 +26,15 @@ document.addEventListener('alpine:init', () => {
     pollBeforeUnloadHandler: null,
 
     init() {
-      // Parse JSON data
-      this.parsedData = JSON.parse(
-        document.getElementById('parsed_data_json')?.textContent || 'null'
-      );
-      this.clustering = JSON.parse(
-        document.getElementById('clustering_json')?.textContent || 'null'
-      );
-      this.multiKey = JSON.parse(
-        document.getElementById('clustering_multi_key')?.textContent || '""'
-      );
-      this.clusteringAvailable = JSON.parse(
-        document.getElementById('clustering_available_json')?.textContent || 'false'
-      );
-      this.episodeIds = this.parsedData?.episode_ids ?? [];
-      this.uniqueAgents = this.parsedData?.unique_agents ?? [];
-      this.rewardsOverTime = this.parsedData?.rewards_over_time ?? [];
-      this.decomposedRewards = this.parsedData?.decomposed_rewards ?? [];
-      this.actionVReward = this.parsedData?.action_v_reward ?? {};
-      this.rewardHistogram = this.parsedData?.reward_histogram ?? [];
-      this.actionVFrequency = this.parsedData?.action_v_frequency ?? {};
-      this.stepData = this.parsedData?.step_data ?? [];
-      this.timelineKeySteps = this.parsedData?.timeline_key_steps ?? [];
-      this.timelineKeyStepsGlobal = this.parsedData?.timeline_key_steps_global ?? [];
-      this.episodesCount = Array.isArray(this.episodeIds) ? this.episodeIds.length : null;
-      this.agentsCount = Array.isArray(this.uniqueAgents) ? this.uniqueAgents.length : null;
-      this.maxStepsGlobal = (this.parsedData?.max_steps ?? 1) - 1;
+      this.maxStepsGlobal = (this.$store.insights.parsedData?.max_steps ?? 1) - 1;
       this.maxSteps = this.maxStepsGlobal;
 
       // Average reward
-      const avgReward = this.computeAverageReward(this.parsedData);
+      const avgReward = this.computeAverageReward(this.$store.insights.parsedData);
       this.avgRewardDisplay = (avgReward ?? null) !== null ? Number(avgReward).toFixed(2) : null;
 
       // Episode summary
-      this.episodeSummaries = (Array.isArray(this.episodeIds) ? this.episodeIds : [])
-        .map((id, idx) => this.summarizeEpisode(idx, id));
+      this.episodeSummaries = this.$store.insights.episodeIds.map((id, idx) => this.summarizeEpisode(idx, id));
 
       // Max steps count (for multi-episode mode)
       this.maxStepsCount = (() => {
@@ -111,23 +69,16 @@ document.addEventListener('alpine:init', () => {
         // Push derived values
         store.currentStep = this.currentStep;
         store.episodeSummaries = this.episodeSummaries;
-        store.multiKey = this.multiKey;
-        store.clusteringAvailable = this.clusteringAvailable;
-        store.clustering = this.clustering;
       }
       // push changes
       this.$watch('episodeSummaries', v => { Alpine.store('insights').episodeSummaries = v; });
       this.$watch('currentStep', v => { Alpine.store('insights').currentStep = v; });
-      this.$watch('clustering', (v) => {
-        const store = (window.Alpine && Alpine.store('insights')) || null;
-        if (store) store.clustering = v;
-      });
 
       // Polling: multi-episode artifact or single-episode partials
-      const isMulti = Array.isArray(this.episodeIds) && this.episodeIds.length > 1;
-      const isSingle = Array.isArray(this.episodeIds) && this.episodeIds.length === 1;
-      if ((isMulti && !this.clustering && this.multiKey)
-          || (isSingle && (!this.clustering || !this.clustering?.obs || !this.clustering?.agent_outs))) {
+      const isMulti = this.$store.insights.episodeIds.length > 1;
+      const isSingle = this.$store.insights.episodeIds.length === 1;
+      if ((isMulti && !this.$store.insights.clustering && this.$store.insights.multiKey)
+          || (isSingle && (!this.$store.insights.clustering || !this.$store.insights.clustering?.obs || !this.$store.insights.clustering?.agent_outs))) {
         this.startClusteringPolling();
       }
     },
@@ -175,7 +126,7 @@ document.addEventListener('alpine:init', () => {
 
     // helpers for templates
     getEpisodeStepIndex(epIdx) {
-      const steps = this.stepData?.[epIdx] || {};
+      const steps = this.$store.insights.stepData?.[epIdx] || {};
       const keys = Object.keys(steps);
       if (!keys.length) return null;
       const nums = keys.map(k => +k).sort((a,b) => a - b);
@@ -186,7 +137,7 @@ document.addEventListener('alpine:init', () => {
     getEpisodeStepData(epIdx) {
       const idx = this.getEpisodeStepIndex(epIdx);
       if (idx === null) return null;
-      const steps = this.stepData?.[epIdx] || {};
+      const steps = this.$store.insights.stepData?.[epIdx] || {};
       return steps[idx] ?? steps[String(idx)] ?? null;
     },
     // Compatibility alias used by some templates
@@ -251,13 +202,10 @@ document.addEventListener('alpine:init', () => {
       return null;
     },
     summarizeEpisode(idx, id) {
-      const allRewards = Array.isArray(this.rewardsOverTime[idx]) ? this.rewardsOverTime[idx] : [];
+      const allRewards = this.$store.insights.rewardsOverTime[idx];
       const steps = allRewards.length || null;
       const perStep = allRewards.filter(rewards => typeof rewards === 'number');
-      let totalReward = null;
-      if (Array.isArray(this.parsedData?.episode_total_rewards)) {
-        totalReward = typeof this.parsedData.episode_total_rewards[idx] === 'number' ? this.parsedData.episode_total_rewards[idx] : null;
-      }
+      let totalReward = this.$store.insights.parsedData.episode_total_rewards[idx];
       if (totalReward === null && allRewards.length) {
         totalReward = this.totalFromSeries(allRewards);
       }
@@ -297,24 +245,24 @@ document.addEventListener('alpine:init', () => {
       if (this.pollBeforeUnloadHandler) { window.removeEventListener('beforeunload', this.pollBeforeUnloadHandler); this.pollBeforeUnloadHandler = null; }
     },
     async checkClusteringStatus() {
-      const isMulti = !!this.multiKey && Array.isArray(this.episodeIds) && this.episodeIds.length > 1;
+      const isMulti = !!this.$store.insights.multiKey && this.$store.insights.episodeIds.length > 1;
       if (isMulti) {
         const resp = await fetch(
-          `/api/v1/clustering/status/?multi_key=${encodeURIComponent(this.multiKey)}`,
+          `/api/v1/clustering/status/?multi_key=${encodeURIComponent(this.$store.insights.multiKey)}`,
           { credentials: 'same-origin' }
         );
         if (!resp.ok) return;
         const data = await resp.json();
         if (data && data.available) {
-          this.clusteringAvailable = true;
+          this.$store.insights.clusteringAvailable = true;
           await this.fetchClusteringResult();
           this.stopClusteringPolling();
         }
         return;
       }
-      const isSingle = Array.isArray(this.episodeIds) && this.episodeIds.length === 1;
+      const isSingle = this.$store.insights.episodeIds.length === 1;
       if (isSingle) {
-        const eid = this.episodeIds[0];
+        const eid = this.$store.insights.episodeIds[0];
         const resp = await fetch(
           `/api/v1/clustering/status/?episode_id=${encodeURIComponent(eid)}`,
           { credentials: 'same-origin' }
@@ -326,21 +274,21 @@ document.addEventListener('alpine:init', () => {
           await this.fetchClusteringResult();
         }
         if (data.available) {
-          this.clusteringAvailable = true;
+          this.$store.insights.clusteringAvailable = true;
           this.stopClusteringPolling();
         }
       }
     },
     async fetchClusteringResult() {
       let resp = null;
-      const isMulti = !!this.multiKey && Array.isArray(this.episodeIds) && this.episodeIds.length > 1;
+      const isMulti = !!this.$store.insights.multiKey && this.$store.insights.episodeIds.length > 1;
       if (isMulti) {
         resp = await fetch(
-          `/api/v1/clustering/result/?multi_key=${encodeURIComponent(this.multiKey)}`,
+          `/api/v1/clustering/result/?multi_key=${encodeURIComponent(this.$store.insights.multiKey)}`,
           { credentials: 'same-origin' }
         );
-      } else if (Array.isArray(this.episodeIds) && this.episodeIds.length === 1) {
-        const eid = this.episodeIds[0];
+      } else if (this.$store.insights.episodeIds.length === 1) {
+        const eid = this.$store.insights.episodeIds[0];
         resp = await fetch(
           `/api/v1/clustering/result/?episode_id=${encodeURIComponent(eid)}`,
           { credentials: 'same-origin' }
@@ -348,10 +296,10 @@ document.addEventListener('alpine:init', () => {
       }
       if (!resp || !resp.ok) return;
       const obj = await resp.json();
-      this.clustering = obj;
+      this.$store.insights.clustering = obj;
       const store = (window.Alpine && Alpine.store('insights')) || null;
       if (store) store.clustering = obj;
-      if (this.clustering && ((this.clustering.obs && this.clustering.agent_outs) || isMulti)) {
+      if (this.$store.insights.clustering && ((this.$store.insights.clustering.obs && this.$store.insights.clustering.agent_outs) || isMulti)) {
         this.toastText = 'Clustering computation completed';
         this.showToast = true;
         if (this.toastTimer) { clearTimeout(this.toastTimer); }
diff --git a/mixtape/core/static/mixtape/core/insights/rewardsFrequency.js b/mixtape/core/static/mixtape/core/insights/rewardsFrequency.js
index bf751bd..27d6aa9 100644
--- a/mixtape/core/static/mixtape/core/insights/rewardsFrequency.js
+++ b/mixtape/core/static/mixtape/core/insights/rewardsFrequency.js
@@ -29,11 +29,11 @@ document.addEventListener('alpine:init', () => {
     },
     plot: null,
     init() {
-      this.rewardHistogram.forEach((episode, idx) => {
+      this.$store.insights.rewardHistogram.forEach((episode, idx) => {
         this.data.push({
           x: episode,
           type: 'histogram',
-          name: `Episode ${this.episodeIds[idx]}`,
+          name: `Episode ${this.$store.insights.episodeIds[idx]}`,
           marker: {
             line: {
               width: 2
diff --git a/mixtape/core/static/mixtape/core/insights/rewardsOverTimeDecomp.js b/mixtape/core/static/mixtape/core/insights/rewardsOverTimeDecomp.js
index 8736acf..4d76ec7 100644
--- a/mixtape/core/static/mixtape/core/insights/rewardsOverTimeDecomp.js
+++ b/mixtape/core/static/mixtape/core/insights/rewardsOverTimeDecomp.js
@@ -46,7 +46,7 @@ document.addEventListener('alpine:init', () => {
     },
     initPlot() {
       // Plot decomposed rewards for each episode
-      this.decomposedRewards.forEach((episodeRewards, episodeIdx) => {
+      this.$store.insights.decomposedRewards.forEach((episodeRewards, episodeIdx) => {
         Object.keys(episodeRewards).forEach((rewardType, rewardIdx) => {
           const rewardData = episodeRewards[rewardType];
           this.data.push({
@@ -54,13 +54,13 @@ document.addEventListener('alpine:init', () => {
             y: rewardData,
             type: 'scatter',
             mode: 'lines',
-            name: `Episode ${this.episodeIds[episodeIdx]} - ${rewardType}`,
+            name: `Episode ${this.$store.insights.episodeIds[episodeIdx]} - ${rewardType}`,
           });
         });
       });
 
       // Calculate overall min and max Y values from all data
-      const allYValues = this.decomposedRewards.flatMap(episodeRewards =>
+      const allYValues = this.$store.insights.decomposedRewards.flatMap(episodeRewards =>
         Object.values(episodeRewards).flatMap(rewardData => rewardData)
       );
 
@@ -94,8 +94,8 @@ document.addEventListener('alpine:init', () => {
       }];
     },
     createAnnotations() {
-      const episodeCount = Object.keys(this.decomposedRewards).length;
-      const annotations = this.decomposedRewards.flatMap((episodeRewards, episodeIdx) => {
+      const episodeCount = Object.keys(this.$store.insights.decomposedRewards).length;
+      const annotations = this.$store.insights.decomposedRewards.flatMap((episodeRewards, episodeIdx) => {
         const componentCount = Object.keys(episodeRewards).length;
         const offset = 40 / (componentCount * episodeCount);
         return Object.entries(episodeRewards).map(([rewardType, rewardData]) => {
@@ -124,7 +124,7 @@ document.addEventListener('alpine:init', () => {
         // Calculate overall min and max Y values from all data
         let allYValues = [];
         // Get all Y values from decomposed rewards
-        this.decomposedRewards.forEach(episodeRewards => {
+        this.$store.insights.decomposedRewards.forEach(episodeRewards => {
           Object.values(episodeRewards).forEach(rewardData => {
             allYValues = allYValues.concat(rewardData);
           });
diff --git a/mixtape/core/static/mixtape/core/js/alpine_insights_store.js b/mixtape/core/static/mixtape/core/js/alpine_insights_store.js
index c81abf6..5800911 100644
--- a/mixtape/core/static/mixtape/core/js/alpine_insights_store.js
+++ b/mixtape/core/static/mixtape/core/js/alpine_insights_store.js
@@ -1,10 +1,52 @@
 document.addEventListener('alpine:init', () => {
-  Alpine.store('insights',
-    {
-      // User-configurable flags
-      episodeSummaries: [],
-      // Runtime values
-      currentStep: 0,
-    }
-  );
+  Alpine.store('insights', {
+    // Immutable data
+    parsedData: null,
+    clustering: null,
+    multiKey: '',
+    clusteringAvailable: false,
+
+    episodeIds: [],
+    uniqueAgents: [],
+    rewardsOverTime: [],
+    decomposedRewards: [],
+    actionVReward: {},
+    rewardHistogram: [],
+    actionVFrequency: {},
+    stepData: [],
+    timelineKeySteps: [],
+    timelineKeyStepsGlobal: [],
+
+    // User-configurable flags
+    episodeSummaries: [],
+    // Runtime values
+    currentStep: 0,
+
+    init() {
+      // Parse JSON data
+      this.parsedData = JSON.parse(
+        document.getElementById('parsed_data_json').textContent
+      );
+      this.clustering = JSON.parse(
+        document.getElementById('clustering_json').textContent
+      );
+      this.multiKey = JSON.parse(
+        document.getElementById('clustering_multi_key').textContent
+      );
+      this.clusteringAvailable = JSON.parse(
+        document.getElementById('clustering_available_json').textContent
+      );
+
+      this.episodeIds = this.parsedData.episode_ids;
+      this.uniqueAgents = this.parsedData.unique_agents;
+      this.rewardsOverTime = this.parsedData.rewards_over_time;
+      this.decomposedRewards = this.parsedData?.decomposed_rewards ?? [];
+      this.actionVReward = this.parsedData?.action_v_reward ?? {};
+      this.rewardHistogram = this.parsedData?.reward_histogram ?? [];
+      this.actionVFrequency = this.parsedData?.action_v_frequency ?? {};
+      this.stepData = this.parsedData?.step_data ?? [];
+      this.timelineKeySteps = this.parsedData?.timeline_key_steps ?? [];
+      this.timelineKeyStepsGlobal = this.parsedData?.timeline_key_steps_global ?? [];
+    },
+  });
 });
diff --git a/mixtape/core/templates/core/insights/action_v_frequency.html b/mixtape/core/templates/core/insights/action_v_frequency.html
index d3b8d1a..bf4d820 100644
--- a/mixtape/core/templates/core/insights/action_v_frequency.html
+++ b/mixtape/core/templates/core/insights/action_v_frequency.html
@@ -3,7 +3,7 @@
     layout: {
       title: {text: 'Actions VS Frequency'},
       autosize: true,
-      barmode: Object.keys(actionVFrequency).length > 1 ? 'group' : 'stack',
+      barmode: Object.keys($store.insights.actionVFrequency).length > 1 ? 'group' : 'stack',
       showlegend: $store.settings.showPlotLegends,
       paper_bgcolor: $store.theme.backgroundColor,
       plot_bgcolor: $store.theme.backgroundColor,
@@ -25,14 +25,14 @@
       displayModeBar: false,
     },
     plot: null,
-    actionVFrequency: Object.keys(actionVFrequency).length > 1 ? actionVFrequency : Object.values(actionVFrequency)[0],
+    actionVFrequency: Object.keys($store.insights.actionVFrequency).length > 1 ? $store.insights.actionVFrequency : Object.values($store.insights.actionVFrequency)[0],
     resizePlot: _.debounce(function() {
       if (!this.$refs.actionsFrequency.querySelector('.plotly')) return;
       Plotly.Plots.resize(this.$refs.actionsFrequency);
     }, 200, {leading: true}),
   }"
   x-init="
-    Object.entries(actionVFrequency).forEach(([grouping, values]) => {
+    Object.entries($store.insights.actionVFrequency).forEach(([grouping, values]) => {
       data.push({
         x: Object.keys(values),
         y: Object.values(values),
diff --git a/mixtape/core/templates/core/insights/action_v_reward_frequency.html b/mixtape/core/templates/core/insights/action_v_reward_frequency.html
index 0a94be1..87db1e7 100644
--- a/mixtape/core/templates/core/insights/action_v_reward_frequency.html
+++ b/mixtape/core/templates/core/insights/action_v_reward_frequency.html
@@ -15,7 +15,7 @@
         zeroline: false,
       },
       autosize: true,
-      barmode: Object.keys(actionVReward).length > 1 ? 'group' : 'stack',
+      barmode: Object.keys($store.insights.actionVReward).length > 1 ? 'group' : 'stack',
       showlegend: $store.settings.showPlotLegends,
       paper_bgcolor: $store.theme.backgroundColor,
       plot_bgcolor: $store.theme.backgroundColor,
@@ -27,14 +27,14 @@
       displayModeBar: false,
     },
     plot: null,
-    actionVReward: Object.keys(actionVReward).length > 1 ? actionVReward : Object.values(actionVReward)[0],
+    actionVReward: Object.keys($store.insights.actionVReward).length > 1 ? $store.insights.actionVReward : Object.values($store.insights.actionVReward)[0],
     resizePlot: _.debounce(function() {
       if (!this.$refs.actionsRewards.querySelector('.plotly')) return;
       Plotly.Plots.resize(this.$refs.actionsRewards);
     }, 200, {leading: true}),
   }"
   x-init="
-    data = Object.entries(actionVReward).map(([grouping, values]) => ({
+    data = Object.entries($store.insights.actionVReward).map(([grouping, values]) => ({
       x: Object.keys(values),
       y: Object.values(values),
       type: 'bar',
diff --git a/mixtape/core/templates/core/insights/clustering.html b/mixtape/core/templates/core/insights/clustering.html
index 8bd14da..680de61 100644
--- a/mixtape/core/templates/core/insights/clustering.html
+++ b/mixtape/core/templates/core/insights/clustering.html
@@ -27,21 +27,15 @@
     }, 200, {leading: true}),
     buildPlot() {
       this.data = [];
-      let agents = [];
-      if ($store.insights && Array.isArray($store.insights.uniqueAgents)) {
-        agents = $store.insights.uniqueAgents
-      };
-      let episodes = [];
-      if ($store.insights && Array.isArray($store.insights.episodeIds)) {
-        episodes = $store.insights.episodeIds
-      };
+      let agents = $store.insights.uniqueAgents;
+      let episodes = $store.insights.episodeIds;
       let clustering = null;
-      if ($store.insights && $store.insights.clustering) {
+      if ($store.insights.clustering) {
         clustering = $store.insights.clustering
       };
       if (!clustering || !clustering[{{key}}]) return;
       for (let agentIdx = 0; agentIdx < agents.length; agentIdx++) {
-        clustering[{{key}}].episodeManifolds.forEach((episodeManifold, episodeIdx) => {
+        clustering[{{key}}].episode_manifolds.forEach((episodeManifold, episodeIdx) => {
           const xCoords = [];
           const yCoords = [];
           episodeManifold.forEach(row => {
@@ -93,32 +87,22 @@
     },
   }"
   x-init="
-    if ($store.insights && $store.insights.clustering && $store.insights.clustering[{{key}}]) {
+    if ($store.insights.clustering && $store.insights.clustering[{{key}}]) {
       buildPlot();
     };
     $watch(
-      () => $store.insights && $store.insights.clustering && $store.insights.clustering[{{key}}],
+      () => $store.insights.clustering && $store.insights.clustering[{{key}}],
       (v) => { if (v) { buildPlot(); } }
     );
   "
   x-effect="() => {
-    if (!this.plot
-        && $store.insights
-        && $store.insights.clustering && $store.insights.clustering[{{key}}]
-      ) { buildPlot(); }
+    if (!this.plot && $store.insights.clustering && $store.insights.clustering[{{key}}]) {
+      buildPlot();
+    }
     if (this.plot) {
-      let numAgents = 0;
-      if ($store.insights && Array.isArray($store.insights.uniqueAgents)) {
-        numAgents = $store.insights.uniqueAgents.length;
-      }
-      let numEpisodes = 0;
-      if ($store.insights && Array.isArray($store.insights.episodeIds)) {
-        numEpisodes = $store.insights.episodeIds.length;
-      }
-      let currentStep = 0;
-      if ($store.insights && typeof $store.insights.currentStep === 'number') {
-        currentStep = $store.insights.currentStep;
-      }
+      let numAgents = $store.insights.uniqueAgents.length;
+      let numEpisodes = $store.insights.episodeIds.length;
+      let currentStep = $store.insights.currentStep;
 
       // Get the current plot data
       const plotElement = $refs.allManifolds;
@@ -145,14 +129,8 @@
           ) {
             highlightX.push(agentTrace.x[currentStep]);
             highlightY.push(agentTrace.y[currentStep]);
-            let agents = [];
-            if ($store.insights && Array.isArray($store.insights.uniqueAgents)) {
-              agents = $store.insights.uniqueAgents;
-            }
-            let episodes = [];
-            if ($store.insights && Array.isArray($store.insights.episodeIds)) {
-              episodes = $store.insights.episodeIds;
-            }
+            let agents = $store.insights.uniqueAgents;
+            let episodes = $store.insights.episodeIds;
             highlightText.push(`${agents[agentIdx]} Episode ${episodes[episodeIdx]}`);
           }
         }
@@ -200,13 +178,13 @@
   >
   <div
     class="skeleton h-[450px] w-full"
-    x-show="!($store.insights && $store.insights.clustering && $store.insights.clustering[{{key}}])"
+    x-show="!($store.insights.clustering && $store.insights.clustering[{{key}}])"
     x-cloak
   ></div>
   <div
     x-ref="allManifolds"
     class="w-full"
-    x-show="$store.insights && $store.insights.clustering && $store.insights.clustering[{{key}}]"
+    x-show="$store.insights.clustering && $store.insights.clustering[{{key}}]"
     x-cloak
   ></div>
 </div>
diff --git a/mixtape/core/templates/core/insights/episode_info.html b/mixtape/core/templates/core/insights/episode_info.html
index a107eda..8bac15c 100644
--- a/mixtape/core/templates/core/insights/episode_info.html
+++ b/mixtape/core/templates/core/insights/episode_info.html
@@ -21,7 +21,7 @@
         </tr>
       </thead>
       <tbody>
-        <template x-for="agent in uniqueAgents" :key="agent">
+        <template x-for="agent in $store.insights.uniqueAgents" :key="agent">
           <tr class="border-t">
             <td class="py-2 px-2 font-medium" x-text="agent"></td>
             <template x-for="pair in episodePairs" :key="`r-${agent}-${pair.epIdx}-${pair.kind}`">
diff --git a/mixtape/core/templates/core/insights/partials/_tabs_overview.html b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
index 487d691..0478a5d 100644
--- a/mixtape/core/templates/core/insights/partials/_tabs_overview.html
+++ b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
@@ -50,24 +50,21 @@
         <span
           class="ml-2 loading loading-spinner loading-xs text-primary"
           x-show="
-            Array.isArray(episodeIds)
-            && (
-              (episodeIds.length > 1 && !clustering)
-              || (episodeIds.length === 1 && (!clustering || !clustering?.obs || !clustering?.agent_outs))
-            )
+            ($store.insights.episodeIds.length > 1 && !$store.insights.clustering)
+            || ($store.insights.episodeIds.length === 1 && (!$store.insights.clustering || !$store.insights.clustering?.obs || !$store.insights.clustering?.agent_outs))
           "
           x-cloak
         ></span>
       </button>
     </div>
     <div class="flex items-center gap-2 flex-wrap">
-      <span class="badge badge-soft badge-primary" :title="`${episodesCount ?? '—'} Episodes`">
+      <span class="badge badge-soft badge-primary" :title="`${$store.insights.episodeIds.length} Episodes`">
         <i class="ri-checkbox-multiple-blank-line"></i>
-        <span class="font-semibold" x-text="episodesCount ?? '—'"></span>
+        <span class="font-semibold" x-text="$store.insights.episodeIds.length"></span>
       </span>
-      <span class="badge badge-soft badge-primary" :title="`${agentsCount ?? '—'} Agents`">
+      <span class="badge badge-soft badge-primary" :title="`${$store.insights.uniqueAgents.length} Agents`">
         <i class="ri-robot-2-line"></i>
-        <span class="font-semibold" x-text="agentsCount ?? '—'"></span>
+        <span class="font-semibold" x-text="$store.insights.uniqueAgents.length"></span>
       </span>
       <span class="badge badge-soft badge-primary" :title="`Avg Reward: ${avgRewardDisplay ?? '—'}`">
         <i class="ri-trophy-line"></i>
@@ -144,8 +141,7 @@ <h3 class="text-sm font-medium mb-2">Observations</h3>
             class="flex justify-center"
             style="height: calc(100% - 20px);"
             x-show="
-              Array.isArray(episodeIds)
-              && ((episodeIds.length > 1 && !clustering) || (episodeIds.length === 1 && !(clustering && clustering.obs)))
+              ($store.insights.episodeIds.length > 1 && !$store.insights.clustering) || ($store.insights.episodeIds.length === 1 && !($store.insights.clustering && $store.insights.clustering.obs))
             "
             x-cloak
           >
@@ -165,8 +161,7 @@ <h3 class="text-sm font-medium mb-2">Actions</h3>
             class="flex justify-center"
             style="height: calc(100% - 20px);"
             x-show="
-              Array.isArray(episodeIds)
-              && ((episodeIds.length > 1 && !clustering) || (episodeIds.length === 1 && !(clustering && clustering.agent_outs)))
+              ($store.insights.episodeIds.length > 1 && !$store.insights.clustering) || ($store.insights.episodeIds.length === 1 && !($store.insights.clustering && $store.insights.clustering.agent_outs))
             "
             x-cloak
           >
diff --git a/mixtape/core/templates/core/insights/rewards_over_time.html b/mixtape/core/templates/core/insights/rewards_over_time.html
index 9c29831..bbaac02 100644
--- a/mixtape/core/templates/core/insights/rewards_over_time.html
+++ b/mixtape/core/templates/core/insights/rewards_over_time.html
@@ -25,8 +25,8 @@
       annotations: [
         {
           x: currentStep,
-          y: rewardsOverTime[0][currentStep],
-          text: rewardsOverTime[0][currentStep].toFixed(2),
+          y: $store.insights.rewardsOverTime[0][currentStep],
+          text: $store.insights.rewardsOverTime[0][currentStep].toFixed(2),
         }
       ],
     },
@@ -47,12 +47,12 @@
     },
   }"
   x-init="
-    rewardsOverTime.forEach((episode, idx) => {
+    $store.insights.rewardsOverTime.forEach((episode, idx) => {
       data.push({
         x: Array.from({length: episode.length}, (_, i) => i),
         y: episode,
         type: 'scatter',
-        name: `Episode ${episodeIds[idx]}`,
+        name: `Episode ${$store.insights.episodeIds[idx]}`,
         marker: {
           line: {
             width: 2
@@ -62,7 +62,7 @@
     });
     data.push({
       x: [currentStep, currentStep],
-      y: [0, Math.max(...rewardsOverTime.flat())],
+      y: [0, Math.max(...$store.insights.rewardsOverTime.flat())],
       type: 'scatter',
       mode: 'lines',
       line: {
@@ -88,16 +88,16 @@
     if (this.plot) {
       Plotly.update($refs.rewardsOverTime, {
         x: [[currentStep, currentStep]],
-        y: [[Math.min(...rewardsOverTime.flat()), Math.max(...rewardsOverTime.flat())]]
+        y: [[Math.min(...$store.insights.rewardsOverTime.flat()), Math.max(...$store.insights.rewardsOverTime.flat())]]
       }, {
-        annotations: rewardsOverTime.map((episode, idx) => {
+        annotations: $store.insights.rewardsOverTime.map((episode, idx) => {
           return {
             x: getStep(episode),
             y: episode[getStep(episode)],
             text: episode[getStep(episode)].toFixed(2),
           }
         })
-      }, [rewardsOverTime.length]);
+      }, [$store.insights.rewardsOverTime.length]);
     }"
   x-resize="resizePlot"
 >
diff --git a/mixtape/core/templates/core/insights/timeline.html b/mixtape/core/templates/core/insights/timeline.html
index 7b1d437..2163dc8 100644
--- a/mixtape/core/templates/core/insights/timeline.html
+++ b/mixtape/core/templates/core/insights/timeline.html
@@ -1,11 +1,11 @@
 <section x-cloak class="border border-base-300 rounded-lg flex">
   <ol class="items-center flex p-1 w-full">
     <li class="relative flex items-center"><div class="flex w-1 bg-primary h-6 ml-2"></div></li>
-    <template x-for="ts in (($store.settings.useGlobalTimeline && timelineKeyStepsGlobal.length)
-                              ? timelineKeyStepsGlobal
-                              : ((timelineKeySteps && timelineKeySteps[$store.settings.timelineEpisodeIdx])
-                                  ? timelineKeySteps[$store.settings.timelineEpisodeIdx]
-                                  : ((timelineKeySteps && timelineKeySteps[0]) ? timelineKeySteps[0] : [])))">
+    <template x-for="ts in (($store.settings.useGlobalTimeline && $store.insights.timelineKeyStepsGlobal.length)
+                              ? $store.insights.timelineKeyStepsGlobal
+                              : (($store.insights.timelineKeySteps && $store.insights.timelineKeySteps[$store.settings.timelineEpisodeIdx])
+                                  ? $store.insights.timelineKeySteps[$store.settings.timelineEpisodeIdx]
+                                  : (($store.insights.timelineKeySteps && $store.insights.timelineKeySteps[0]) ? $store.insights.timelineKeySteps[0] : [])))">
       <li class="relative w-full flex even:flex-col odd:flex-col-reverse even:mb-5 odd:mt-5" :key="ts.number">
         <p class="text-sm text-center" x-text="Number((ts.peak_total_rewards ?? ts.total_rewards) ?? 0).toFixed(2)"></p>
         <div class="flex items-center">

From 816f2c2754fa0980fd5743e5364960fd39ef3a11 Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Sun, 18 Jan 2026 10:32:02 -0500
Subject: [PATCH 02/11] Move the `actionsFrequency` data to a dedicated file

---
 .../mixtape/core/insights/actionsFrequency.js | 61 ++++++++++++++++++
 .../core/insights/action_v_frequency.html     | 62 -------------------
 .../insights/partials/_tabs_overview.html     |  3 +-
 3 files changed, 63 insertions(+), 63 deletions(-)
 create mode 100644 mixtape/core/static/mixtape/core/insights/actionsFrequency.js
 delete mode 100644 mixtape/core/templates/core/insights/action_v_frequency.html

diff --git a/mixtape/core/static/mixtape/core/insights/actionsFrequency.js b/mixtape/core/static/mixtape/core/insights/actionsFrequency.js
new file mode 100644
index 0000000..db76a01
--- /dev/null
+++ b/mixtape/core/static/mixtape/core/insights/actionsFrequency.js
@@ -0,0 +1,61 @@
+document.addEventListener('alpine:init', () => {
+  Alpine.data('actionsFrequency', () => ({
+    data: [],
+    layout: {
+      title: {text: 'Actions VS Frequency'},
+      autosize: true,
+      barmode: Object.keys(Alpine.store('insights').actionVFrequency).length > 1 ? 'group' : 'stack',
+      showlegend: Alpine.store('settings').showPlotLegends,
+      paper_bgcolor: Alpine.store('theme').backgroundColor,
+      plot_bgcolor: Alpine.store('theme').backgroundColor,
+      font: {
+        color: Alpine.store('theme').fontColor
+      },
+      xaxis: {
+        gridcolor: Alpine.store('theme').gridColor,
+        linecolor: Alpine.store('theme').gridColor,
+        zeroline: false,
+      },
+      yaxis: {
+        gridcolor: Alpine.store('theme').gridColor,
+        linecolor: Alpine.store('theme').gridColor,
+        zeroline: false,
+      },
+    },
+    config: {
+      displayModeBar: false,
+    },
+    plot: null,
+    actionVFrequency: Object.keys(Alpine.store('insights').actionVFrequency).length > 1 ? Alpine.store('insights').actionVFrequency : Object.values(Alpine.store('insights').actionVFrequency)[0],
+    init() {
+      Object.entries(this.$store.insights.actionVFrequency).forEach(([grouping, values]) => {
+        this.data.push({
+          x: Object.keys(values),
+          y: Object.values(values),
+          type: 'bar',
+          name: grouping,
+          marker: {
+            line: {
+              width: 2
+            }
+          }
+        });
+      });
+      this.plot = Plotly.react(this.$refs.actionsFrequency, this.data, this.layout, this.config);
+      this.$watch('$store.settings.showPlotLegends', () => {
+        this.$nextTick(() => {
+          Plotly.relayout(
+            this.$refs.actionsFrequency,
+            {
+              autosize: true,
+              showlegend: this.$store.settings.showPlotLegends
+            })
+        });
+      });
+    },
+    resizePlot: _.debounce(function () {
+      if (!this.$refs.actionsFrequency.querySelector('.plotly')) return;
+      Plotly.Plots.resize(this.$refs.actionsFrequency);
+    }, 200, {leading: true}),
+  }));
+});
diff --git a/mixtape/core/templates/core/insights/action_v_frequency.html b/mixtape/core/templates/core/insights/action_v_frequency.html
deleted file mode 100644
index bf4d820..0000000
--- a/mixtape/core/templates/core/insights/action_v_frequency.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<div x-data="{
-    data: [],
-    layout: {
-      title: {text: 'Actions VS Frequency'},
-      autosize: true,
-      barmode: Object.keys($store.insights.actionVFrequency).length > 1 ? 'group' : 'stack',
-      showlegend: $store.settings.showPlotLegends,
-      paper_bgcolor: $store.theme.backgroundColor,
-      plot_bgcolor: $store.theme.backgroundColor,
-      font: {
-        color: $store.theme.fontColor
-      },
-      xaxis: {
-        gridcolor: $store.theme.gridColor,
-        linecolor: $store.theme.gridColor,
-        zeroline: false,
-      },
-      yaxis: {
-        gridcolor: $store.theme.gridColor,
-        linecolor: $store.theme.gridColor,
-        zeroline: false,
-      },
-    },
-    config: {
-      displayModeBar: false,
-    },
-    plot: null,
-    actionVFrequency: Object.keys($store.insights.actionVFrequency).length > 1 ? $store.insights.actionVFrequency : Object.values($store.insights.actionVFrequency)[0],
-    resizePlot: _.debounce(function() {
-      if (!this.$refs.actionsFrequency.querySelector('.plotly')) return;
-      Plotly.Plots.resize(this.$refs.actionsFrequency);
-    }, 200, {leading: true}),
-  }"
-  x-init="
-    Object.entries($store.insights.actionVFrequency).forEach(([grouping, values]) => {
-      data.push({
-        x: Object.keys(values),
-        y: Object.values(values),
-        type: 'bar',
-        name: grouping,
-        marker: {
-          line: {
-            width: 2
-          }
-        }
-      });
-    });
-    this.plot = Plotly.react($refs.actionsFrequency, data, layout, config);
-    $watch('$store.settings.showPlotLegends', () => {
-      $nextTick(() => {
-        Plotly.relayout(
-          $refs.actionsFrequency,
-          {
-            autosize: true,
-            showlegend: $store.settings.showPlotLegends
-          })
-      });
-    });"
-  x-resize="resizePlot"
->
-  <div x-ref="actionsFrequency" class="w-full"></div>
-</div>
diff --git a/mixtape/core/templates/core/insights/partials/_tabs_overview.html b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
index 0478a5d..30a4181 100644
--- a/mixtape/core/templates/core/insights/partials/_tabs_overview.html
+++ b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
@@ -2,6 +2,7 @@
 <script src="{% static 'mixtape/core/insights/insightsTabs.js' %}"></script>
 <script src="{% static 'mixtape/core/insights/rewardsOverTimeDecomp.js' %}"></script>
 <script src="{% static 'mixtape/core/insights/rewardsFrequency.js' %}"></script>
+<script src="{% static 'mixtape/core/insights/actionsFrequency.js' %}"></script>
 <div
   x-data="insightsTabs"
   x-cloak
@@ -93,7 +94,7 @@
           x-show="$store.settings.showPlotActionFrequency"
         >
           <div class="min-h-[18rem]">
-            {% include "core/insights/action_v_frequency.html" %}
+            <div x-data="actionsFrequency" x-ref="actionsFrequency" x-resize="resizePlot" class="w-full"></div>
           </div>
         </section>
         <section

From 10da548075bf764ddd4e7282df8ec89ca4e4e831 Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Sun, 18 Jan 2026 10:32:02 -0500
Subject: [PATCH 03/11] Move "currentStep" to insights store

---
 .../mixtape/core/insights/insightsTabs.js      | 11 ++++-------
 .../core/insights/rewardsOverTimeDecomp.js     |  8 ++++----
 .../core/insights/clustering_timeline.html     |  9 ++-------
 .../core/insights/replay_controls.html         | 18 +++++++++---------
 .../core/insights/rewards_over_time.html       | 14 +++++++-------
 .../core/templates/core/insights/timeline.html |  4 ++--
 6 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/mixtape/core/static/mixtape/core/insights/insightsTabs.js b/mixtape/core/static/mixtape/core/insights/insightsTabs.js
index 08841ae..a252ed2 100644
--- a/mixtape/core/static/mixtape/core/insights/insightsTabs.js
+++ b/mixtape/core/static/mixtape/core/insights/insightsTabs.js
@@ -4,7 +4,6 @@ document.addEventListener('alpine:init', () => {
     active: 'Overview',
     maxStepsCount: null,
     avgRewardDisplay: null,
-    currentStep: 0,
     maxSteps: 0,
     maxStepsGlobal: 0,
     episodeSummaries: [],
@@ -67,12 +66,10 @@ document.addEventListener('alpine:init', () => {
       const store = (window.Alpine && Alpine.store('insights')) || null;
       if (store) {
         // Push derived values
-        store.currentStep = this.currentStep;
         store.episodeSummaries = this.episodeSummaries;
       }
       // push changes
       this.$watch('episodeSummaries', v => { Alpine.store('insights').episodeSummaries = v; });
-      this.$watch('currentStep', v => { Alpine.store('insights').currentStep = v; });
 
       // Polling: multi-episode artifact or single-episode partials
       const isMulti = this.$store.insights.episodeIds.length > 1;
@@ -85,10 +82,10 @@ document.addEventListener('alpine:init', () => {
 
     stepForward() {
       if (!this.playing) return;
-      if (this.currentStep < this.maxSteps) {
+      if (this.$store.insights.currentStep < this.maxSteps) {
         const delay = Math.max(50, Math.round(500 / (this.$store.settings.playbackSpeed || 1)));
-        setTimeout(() => { this.currentStep++; this.stepForward(); }, delay);
-      } else { this.playing = false; this.currentStep = 0; }
+        setTimeout(() => { this.$store.insights.currentStep++; this.stepForward(); }, delay);
+      } else { this.playing = false; this.$store.insights.currentStep = 0; }
     },
     updateMaxSteps() {
       if (this.limitToEpisode) {
@@ -131,7 +128,7 @@ document.addEventListener('alpine:init', () => {
       if (!keys.length) return null;
       const nums = keys.map(k => +k).sort((a,b) => a - b);
       let chosen = nums[0];
-      for (let i = 0; i < nums.length; i++) { if (nums[i] <= this.currentStep) chosen = nums[i]; else break; }
+      for (let i = 0; i < nums.length; i++) { if (nums[i] <= this.$store.insights.currentStep) chosen = nums[i]; else break; }
       return chosen;
     },
     getEpisodeStepData(epIdx) {
diff --git a/mixtape/core/static/mixtape/core/insights/rewardsOverTimeDecomp.js b/mixtape/core/static/mixtape/core/insights/rewardsOverTimeDecomp.js
index 4d76ec7..88a44d7 100644
--- a/mixtape/core/static/mixtape/core/insights/rewardsOverTimeDecomp.js
+++ b/mixtape/core/static/mixtape/core/insights/rewardsOverTimeDecomp.js
@@ -82,8 +82,8 @@ document.addEventListener('alpine:init', () => {
 
       return [{
         type: 'line',
-        x0: this.currentStep,
-        x1: this.currentStep,
+        x0: this.$store.insights.currentStep,
+        x1: this.$store.insights.currentStep,
         y0: minY,
         y1: maxY,
         line: {
@@ -99,10 +99,10 @@ document.addEventListener('alpine:init', () => {
         const componentCount = Object.keys(episodeRewards).length;
         const offset = 40 / (componentCount * episodeCount);
         return Object.entries(episodeRewards).map(([rewardType, rewardData]) => {
-          const currentValue = rewardData[this.currentStep] || rewardData[rewardData.length - 1];
+          const currentValue = rewardData[this.$store.insights.currentStep] || rewardData[rewardData.length - 1];
 
           return {
-            x: this.currentStep,
+            x: this.$store.insights.currentStep,
             y: currentValue,
             text: currentValue.toFixed(2),
             showarrow: true,
diff --git a/mixtape/core/templates/core/insights/clustering_timeline.html b/mixtape/core/templates/core/insights/clustering_timeline.html
index fce7143..453f2ae 100644
--- a/mixtape/core/templates/core/insights/clustering_timeline.html
+++ b/mixtape/core/templates/core/insights/clustering_timeline.html
@@ -40,10 +40,7 @@
             return row;
           })
         : agentStepClusters;
-      let currentStepVal = 0;
-      if ($store.insights && typeof $store.insights.currentStep === 'number') {
-        currentStepVal = $store.insights.currentStep;
-      }
+      let currentStepVal = $store.insights.currentStep;
       const yVal = Array.isArray(agentStepClusters)
         ? agentStepClusters.length - 1
         : 1;
@@ -131,9 +128,7 @@
       const agentsNow = zNow.length;
       const yMin = 0;
       const yMax = Math.max(0, (agentsNow || 1) - 1);
-      const step = (
-        $store.insights && typeof $store.insights.currentStep === 'number'
-      ) ? $store.insights.currentStep : currentStep;
+      const step = $store.insights.currentStep;
       const xLine = [step, step];
       const yLine = [yMin - 0.5, yMax + 0.5];
       // Use restyle: arguments must be arrays-of-arrays per selected trace
diff --git a/mixtape/core/templates/core/insights/replay_controls.html b/mixtape/core/templates/core/insights/replay_controls.html
index 606369e..1ac36bc 100644
--- a/mixtape/core/templates/core/insights/replay_controls.html
+++ b/mixtape/core/templates/core/insights/replay_controls.html
@@ -1,15 +1,15 @@
 <section class="flex items-center justify-center w-full gap-2 px-2 py-1 border border-base-300 rounded-lg">
   <button
     class="btn btn-ghost btn-sm"
-    :disabled="currentStep === 0"
-    @click="currentStep = 0"
+    :disabled="$store.insights.currentStep === 0"
+    @click="$store.insights.currentStep = 0"
   >
     <i class="ri-rewind-start-line"></i>
   </button>
   <button
     class="btn btn-ghost btn-sm"
-    :disabled="currentStep === 0"
-    @click="currentStep--"
+    :disabled="$store.insights.currentStep === 0"
+    @click="$store.insights.currentStep--"
   >
     <i class="ri-rewind-line"></i>
   </button>
@@ -22,15 +22,15 @@
   </button>
   <button
     class="btn btn-ghost btn-sm"
-    :disabled="currentStep === maxSteps"
-    @click="currentStep++"
+    :disabled="$store.insights.currentStep === maxSteps"
+    @click="$store.insights.currentStep++"
   >
     <i class="ri-speed-line"></i>
   </button>
   <button
     class="btn btn-ghost btn-sm"
-    :disabled="currentStep === maxSteps"
-    @click="currentStep = maxSteps"
+    :disabled="$store.insights.currentStep === maxSteps"
+    @click="$store.insights.currentStep = maxSteps"
   >
     <i class="ri-forward-end-line"></i>
   </button>
@@ -41,7 +41,7 @@
       class="input input-sm validator w-16 text-center"
       min="0"
       :max="maxStepsGlobal"
-      x-model.number="currentStep"
+      x-model.number="$store.insights.currentStep"
     />
     <span class="text-xs">/ <span x-text="maxStepsGlobal"></span></span>
   </div>
diff --git a/mixtape/core/templates/core/insights/rewards_over_time.html b/mixtape/core/templates/core/insights/rewards_over_time.html
index bbaac02..b504383 100644
--- a/mixtape/core/templates/core/insights/rewards_over_time.html
+++ b/mixtape/core/templates/core/insights/rewards_over_time.html
@@ -24,9 +24,9 @@
       },
       annotations: [
         {
-          x: currentStep,
-          y: $store.insights.rewardsOverTime[0][currentStep],
-          text: $store.insights.rewardsOverTime[0][currentStep].toFixed(2),
+          x: $store.insights.currentStep,
+          y: $store.insights.rewardsOverTime[0][$store.insights.currentStep],
+          text: $store.insights.rewardsOverTime[0][$store.insights.currentStep].toFixed(2),
         }
       ],
     },
@@ -40,8 +40,8 @@
       Plotly.Plots.resize(this.$refs.rewardsOverTime);
     }, 200, {leading: true}),
     getStep(episode) {
-      if (this.currentStep < Object.keys(episode).length) {
-        return this.currentStep;
+      if (this.$store.insights.currentStep < Object.keys(episode).length) {
+        return this.$store.insights.currentStep;
       }
       return Object.keys(episode).length - 1;
     },
@@ -61,7 +61,7 @@
       });
     });
     data.push({
-      x: [currentStep, currentStep],
+      x: [$store.insights.currentStep, $store.insights.currentStep],
       y: [0, Math.max(...$store.insights.rewardsOverTime.flat())],
       type: 'scatter',
       mode: 'lines',
@@ -87,7 +87,7 @@
   x-effect="
     if (this.plot) {
       Plotly.update($refs.rewardsOverTime, {
-        x: [[currentStep, currentStep]],
+        x: [[$store.insights.currentStep, $store.insights.currentStep]],
         y: [[Math.min(...$store.insights.rewardsOverTime.flat()), Math.max(...$store.insights.rewardsOverTime.flat())]]
       }, {
         annotations: $store.insights.rewardsOverTime.map((episode, idx) => {
diff --git a/mixtape/core/templates/core/insights/timeline.html b/mixtape/core/templates/core/insights/timeline.html
index 2163dc8..1ebfeb6 100644
--- a/mixtape/core/templates/core/insights/timeline.html
+++ b/mixtape/core/templates/core/insights/timeline.html
@@ -12,8 +12,8 @@
             <div class="flex w-full bg-primary h-0.5"></div>
             <button
               class="cursor-pointer z-10 flex items-center justify-center w-2 h-2 rounded-full ring-4 shrink-0"
-              :class="currentStep === ts.number ? 'ring-[var(--color-primary-content)] bg-primary' : 'ring-[var(--color-primary)]'"
-              @click="currentStep = ts.number"
+              :class="$store.insights.currentStep === ts.number ? 'ring-[var(--color-primary-content)] bg-primary' : 'ring-[var(--color-primary)]'"
+              @click="$store.insights.currentStep = ts.number"
               :title="timelineTitle(ts)"
               :aria-label="timelineAria(ts)"
             >

From c9211d8b451022b2a6e02ecf55c1517451aeb5ec Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Sun, 18 Jan 2026 10:32:03 -0500
Subject: [PATCH 04/11] Move the `rewardsOverTime` data to a dedicated file

---
 .../mixtape/core/insights/rewardsOverTime.js  | 105 ++++++++++++++++++
 .../insights/partials/_tabs_overview.html     |   5 +-
 .../core/insights/rewards_over_time.html      | 105 ------------------
 3 files changed, 108 insertions(+), 107 deletions(-)
 create mode 100644 mixtape/core/static/mixtape/core/insights/rewardsOverTime.js
 delete mode 100644 mixtape/core/templates/core/insights/rewards_over_time.html

diff --git a/mixtape/core/static/mixtape/core/insights/rewardsOverTime.js b/mixtape/core/static/mixtape/core/insights/rewardsOverTime.js
new file mode 100644
index 0000000..642042b
--- /dev/null
+++ b/mixtape/core/static/mixtape/core/insights/rewardsOverTime.js
@@ -0,0 +1,105 @@
+document.addEventListener('alpine:init', () => {
+  Alpine.data('rewardsOverTime', () => ({
+    data: [],
+    layout: {
+      title: {text: 'Rewards Over Time'},
+      xaxis: {
+        title: {text: 'Time Step'},
+        gridcolor: Alpine.store('theme').gridColor,
+        linecolor: Alpine.store('theme').gridColor,
+        zeroline: false,
+      },
+      yaxis: {
+        title: {text: 'Cumulative Reward'},
+        gridcolor: Alpine.store('theme').gridColor,
+        linecolor: Alpine.store('theme').gridColor,
+        zeroline: false,
+      },
+      autosize: true,
+      showlegend: Alpine.store('settings').showPlotLegends,
+      paper_bgcolor: Alpine.store('theme').backgroundColor,
+      plot_bgcolor: Alpine.store('theme').backgroundColor,
+      font: {
+        color: Alpine.store('theme').fontColor
+      },
+      annotations: [
+        {
+          x: Alpine.store('insights').currentStep,
+          y: Alpine.store('insights').rewardsOverTime[0][Alpine.store('insights').currentStep],
+          text: Alpine.store('insights').rewardsOverTime[0][Alpine.store('insights').currentStep].toFixed(2),
+        }
+      ],
+    },
+    config: {
+      displayModeBar: false,
+      responsive: true
+    },
+    plot: null,
+    init() {
+      this.$store.insights.rewardsOverTime.forEach((episode, idx) => {
+        this.data.push({
+          x: Array.from({length: episode.length}, (_, i) => i),
+          y: episode,
+          type: 'scatter',
+          name: `Episode ${this.$store.insights.episodeIds[idx]}`,
+          marker: {
+            line: {
+              width: 2
+            }
+          }
+        });
+      });
+      this.data.push({
+        x: [this.$store.insights.currentStep, this.$store.insights.currentStep],
+        y: [0, Math.max(...this.$store.insights.rewardsOverTime.flat())],
+        type: 'scatter',
+        mode: 'lines',
+        line: {
+          color: 'red',
+          width: 2,
+          dash: 'dash'
+        },
+        name: 'Current Step'
+      });
+      this.plot = Plotly.newPlot(this.$refs.rewardsOverTime, this.data, this.layout, this.config);
+      this.$watch('$store.settings.showPlotLegends', () => {
+        this.$nextTick(() => {
+          Plotly.relayout(
+            this.$refs.rewardsOverTime,
+            {
+              autosize: true,
+              showlegend: this.$store.settings.showPlotLegends
+            })
+        });
+      });
+      Alpine.effect(() => {
+        if (this.plot) {
+          Plotly.update(this.$refs.rewardsOverTime, {
+            x: [[this.$store.insights.currentStep, this.$store.insights.currentStep]],
+            y: [[Math.min(...this.$store.insights.rewardsOverTime.flat()), Math.max(...this.$store.insights.rewardsOverTime.flat())]]
+          }, {
+            annotations: this.$store.insights.rewardsOverTime.map((episode, idx) => {
+              return {
+                x: this.getStep(episode),
+                y: episode[this.getStep(episode)],
+                text: episode[this.getStep(episode)].toFixed(2),
+              }
+            })
+          }, [this.$store.insights.rewardsOverTime.length]);
+        }
+      });
+    },
+    resizePlot: _.debounce(function() {
+      if (!this.$refs.rewardsOverTime.querySelector('.plotly')) return;
+      Plotly.Plots.resize(this.$refs.rewardsOverTime);
+    }, 200, {leading: true}),
+    getStep(episode) {
+      if (this.$store.insights.currentStep < Object.keys(episode).length) {
+        return this.$store.insights.currentStep;
+      }
+      return Object.keys(episode).length - 1;
+    },
+
+
+  }));
+});
diff --git a/mixtape/core/templates/core/insights/partials/_tabs_overview.html b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
index 30a4181..39a0346 100644
--- a/mixtape/core/templates/core/insights/partials/_tabs_overview.html
+++ b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
@@ -3,6 +3,7 @@
 <script src="{% static 'mixtape/core/insights/rewardsOverTimeDecomp.js' %}"></script>
 <script src="{% static 'mixtape/core/insights/rewardsFrequency.js' %}"></script>
 <script src="{% static 'mixtape/core/insights/actionsFrequency.js' %}"></script>
+<script src="{% static 'mixtape/core/insights/rewardsOverTime.js' %}"></script>
 <div
   x-data="insightsTabs"
   x-cloak
@@ -115,7 +116,7 @@
           x-show="$store.settings.showPlotRewardsTime"
         >
           <div class="min-h-[18rem]">
-            {% include "core/insights/rewards_over_time.html" %}
+            <div x-data="rewardsOverTime" x-ref="rewardsOverTime" x-resize="resizePlot" class="w-full"></div>
           </div>
         </section>
         {% if has_reward_mapping %}
@@ -124,7 +125,7 @@
           x-show="$store.settings.showPlotRewardsTime"
         >
           <div class="min-h-[18rem]">
-            <div x-data="rewardsOverTime" x-ref="rewardsOverTime" x-resize="resizePlot"></div>
+            <div x-data="rewardsOverTimeDecomp" x-ref="rewardsOverTime" x-resize="resizePlot"></div>
           </div>
         </section>
         {% endif %}
diff --git a/mixtape/core/templates/core/insights/rewards_over_time.html b/mixtape/core/templates/core/insights/rewards_over_time.html
deleted file mode 100644
index b504383..0000000
--- a/mixtape/core/templates/core/insights/rewards_over_time.html
+++ /dev/null
@@ -1,105 +0,0 @@
-<div x-cloak
-  x-data="{
-    data: [],
-    layout: {
-      title: {text: 'Rewards Over Time'},
-      xaxis: {
-        title: {text: 'Time Step'},
-        gridcolor: $store.theme.gridColor,
-        linecolor: $store.theme.gridColor,
-        zeroline: false,
-      },
-      yaxis: {
-        title: {text: 'Cumulative Reward'},
-        gridcolor: $store.theme.gridColor,
-        linecolor: $store.theme.gridColor,
-        zeroline: false,
-      },
-      autosize: true,
-      showlegend: $store.settings.showPlotLegends,
-      paper_bgcolor: $store.theme.backgroundColor,
-      plot_bgcolor: $store.theme.backgroundColor,
-      font: {
-        color: $store.theme.fontColor
-      },
-      annotations: [
-        {
-          x: $store.insights.currentStep,
-          y: $store.insights.rewardsOverTime[0][$store.insights.currentStep],
-          text: $store.insights.rewardsOverTime[0][$store.insights.currentStep].toFixed(2),
-        }
-      ],
-    },
-    config: {
-      displayModeBar: false,
-      responsive: true
-    },
-    plot: null,
-    resizePlot: _.debounce(function() {
-      if (!this.$refs.rewardsOverTime.querySelector('.plotly')) return;
-      Plotly.Plots.resize(this.$refs.rewardsOverTime);
-    }, 200, {leading: true}),
-    getStep(episode) {
-      if (this.$store.insights.currentStep < Object.keys(episode).length) {
-        return this.$store.insights.currentStep;
-      }
-      return Object.keys(episode).length - 1;
-    },
-  }"
-  x-init="
-    $store.insights.rewardsOverTime.forEach((episode, idx) => {
-      data.push({
-        x: Array.from({length: episode.length}, (_, i) => i),
-        y: episode,
-        type: 'scatter',
-        name: `Episode ${$store.insights.episodeIds[idx]}`,
-        marker: {
-          line: {
-            width: 2
-          }
-        }
-      });
-    });
-    data.push({
-      x: [$store.insights.currentStep, $store.insights.currentStep],
-      y: [0, Math.max(...$store.insights.rewardsOverTime.flat())],
-      type: 'scatter',
-      mode: 'lines',
-      line: {
-        color: 'red',
-        width: 2,
-        dash: 'dash'
-      },
-      name: 'Current Step'
-    });
-    this.plot = Plotly.newPlot($refs.rewardsOverTime, data, layout, config);
-    $watch('$store.settings.showPlotLegends', () => {
-      $nextTick(() => {
-        Plotly.relayout(
-          $refs.rewardsOverTime,
-          {
-            autosize: true,
-            showlegend: $store.settings.showPlotLegends
-          })
-      });
-    });
-    "
-  x-effect="
-    if (this.plot) {
-      Plotly.update($refs.rewardsOverTime, {
-        x: [[$store.insights.currentStep, $store.insights.currentStep]],
-        y: [[Math.min(...$store.insights.rewardsOverTime.flat()), Math.max(...$store.insights.rewardsOverTime.flat())]]
-      }, {
-        annotations: $store.insights.rewardsOverTime.map((episode, idx) => {
-          return {
-            x: getStep(episode),
-            y: episode[getStep(episode)],
-            text: episode[getStep(episode)].toFixed(2),
-          }
-        })
-      }, [$store.insights.rewardsOverTime.length]);
-    }"
-  x-resize="resizePlot"
->
-  <div x-ref="rewardsOverTime" class="w-full"></div>
-</div>

From 23cd207d75ff919e7bbc66876c0ce4c4f1cc5934 Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Sun, 18 Jan 2026 10:32:04 -0500
Subject: [PATCH 05/11] Move the `actionsRewards` data to a dedicated file

---
 .../mixtape/core/insights/actionsRewards.js   | 60 ++++++++++++++++++
 .../insights/action_v_reward_frequency.html   | 61 -------------------
 .../insights/partials/_tabs_overview.html     |  3 +-
 3 files changed, 62 insertions(+), 62 deletions(-)
 create mode 100644 mixtape/core/static/mixtape/core/insights/actionsRewards.js
 delete mode 100644 mixtape/core/templates/core/insights/action_v_reward_frequency.html

diff --git a/mixtape/core/static/mixtape/core/insights/actionsRewards.js b/mixtape/core/static/mixtape/core/insights/actionsRewards.js
new file mode 100644
index 0000000..334333a
--- /dev/null
+++ b/mixtape/core/static/mixtape/core/insights/actionsRewards.js
@@ -0,0 +1,60 @@
+document.addEventListener('alpine:init', () => {
+  Alpine.data('actionsRewards', () => ({
+    data: [],
+    layout: {
+      title: {text: 'Actions VS Reward Frequency'},
+      xaxis: {
+        title: {text: 'Action'},
+        gridcolor: Alpine.store('theme').gridColor,
+        linecolor: Alpine.store('theme').gridColor,
+        zeroline: false,
+      },
+      yaxis: {
+        title: {text: 'Reward Frequency'},
+        gridcolor: Alpine.store('theme').gridColor,
+        linecolor: Alpine.store('theme').gridColor,
+        zeroline: false,
+      },
+      autosize: true,
+      barmode: Object.keys(Alpine.store('insights').actionVReward).length > 1 ? 'group' : 'stack',
+      showlegend: Alpine.store('settings').showPlotLegends,
+      paper_bgcolor: Alpine.store('theme').backgroundColor,
+      plot_bgcolor: Alpine.store('theme').backgroundColor,
+      font: {
+        color: Alpine.store('theme').fontColor
+      },
+    },
+    config: {
+      displayModeBar: false,
+    },
+    plot: null,
+    actionVReward: Object.keys(Alpine.store('insights').actionVReward).length > 1 ? Alpine.store('insights').actionVReward : Object.values(Alpine.store('insights').actionVReward)[0],
+    init() {
+      this.data = Object.entries(this.$store.insights.actionVReward).map(([grouping, values]) => ({
+        x: Object.keys(values),
+        y: Object.values(values),
+        type: 'bar',
+        name: grouping,
+        marker: {
+          line: {
+            width: 2
+          }
+        }
+      }));
+      this.plot = Plotly.react(this.$refs.actionsRewards, this.data, this.layout, this.config);
+      this.$watch('$store.settings.showPlotLegends', () => {
+        this.$nextTick(() => {
+          Plotly.relayout(
+            this.$refs.actionsRewards, {
+              autosize: true,
+              showlegend: this.$store.settings.showPlotLegends
+            })
+        });
+      });
+    },
+    resizePlot: _.debounce(function() {
+      if (!this.$refs.actionsRewards.querySelector('.plotly')) return;
+      Plotly.Plots.resize(this.$refs.actionsRewards);
+    }, 200, {leading: true}),
+  }));
+});
diff --git a/mixtape/core/templates/core/insights/action_v_reward_frequency.html b/mixtape/core/templates/core/insights/action_v_reward_frequency.html
deleted file mode 100644
index 87db1e7..0000000
--- a/mixtape/core/templates/core/insights/action_v_reward_frequency.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<div x-data="{
-    data: [],
-    layout: {
-      title: {text: 'Actions VS Reward Frequency'},
-      xaxis: {
-        title: {text: 'Action'},
-        gridcolor: $store.theme.gridColor,
-        linecolor: $store.theme.gridColor,
-        zeroline: false,
-      },
-      yaxis: {
-        title: {text: 'Reward Frequency'},
-        gridcolor: $store.theme.gridColor,
-        linecolor: $store.theme.gridColor,
-        zeroline: false,
-      },
-      autosize: true,
-      barmode: Object.keys($store.insights.actionVReward).length > 1 ? 'group' : 'stack',
-      showlegend: $store.settings.showPlotLegends,
-      paper_bgcolor: $store.theme.backgroundColor,
-      plot_bgcolor: $store.theme.backgroundColor,
-      font: {
-        color: $store.theme.fontColor
-      },
-    },
-    config: {
-      displayModeBar: false,
-    },
-    plot: null,
-    actionVReward: Object.keys($store.insights.actionVReward).length > 1 ? $store.insights.actionVReward : Object.values($store.insights.actionVReward)[0],
-    resizePlot: _.debounce(function() {
-      if (!this.$refs.actionsRewards.querySelector('.plotly')) return;
-      Plotly.Plots.resize(this.$refs.actionsRewards);
-    }, 200, {leading: true}),
-  }"
-  x-init="
-    data = Object.entries($store.insights.actionVReward).map(([grouping, values]) => ({
-      x: Object.keys(values),
-      y: Object.values(values),
-      type: 'bar',
-      name: grouping,
-      marker: {
-        line: {
-          width: 2
-        }
-      }
-    }));
-    this.plot = Plotly.react($refs.actionsRewards, data, layout, config);
-    $watch('$store.settings.showPlotLegends', () => {
-      $nextTick(() => {
-        Plotly.relayout(
-          $refs.actionsRewards, {
-            autosize: true,
-            showlegend: $store.settings.showPlotLegends
-          })
-      });
-    });"
-  x-resize="resizePlot"
->
-  <div x-ref="actionsRewards" class="w-full"></div>
-</div>
diff --git a/mixtape/core/templates/core/insights/partials/_tabs_overview.html b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
index 39a0346..11c770d 100644
--- a/mixtape/core/templates/core/insights/partials/_tabs_overview.html
+++ b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
@@ -4,6 +4,7 @@
 <script src="{% static 'mixtape/core/insights/rewardsFrequency.js' %}"></script>
 <script src="{% static 'mixtape/core/insights/actionsFrequency.js' %}"></script>
 <script src="{% static 'mixtape/core/insights/rewardsOverTime.js' %}"></script>
+<script src="{% static 'mixtape/core/insights/actionsRewards.js' %}"></script>
 <div
   x-data="insightsTabs"
   x-cloak
@@ -103,7 +104,7 @@
           x-show="$store.settings.showPlotActionRewardFrequency"
         >
           <div class="min-h-[18rem]">
-            {% include "core/insights/action_v_reward_frequency.html" %}
+            <div x-data="actionsRewards" x-ref="actionsRewards" x-resize="resizePlot" class="w-full"></div>
           </div>
         </section>
       </div>

From f5ed01bda1dd92062d5bb4cd86bdb42b642d7697 Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Sun, 18 Jan 2026 10:32:05 -0500
Subject: [PATCH 06/11] Rename some static files

---
 .../core/{js/feedback_modal.js => feedbackModal.js}       | 0
 .../insightsStore.js}                                     | 0
 mixtape/core/static/mixtape/core/{css => }/theme.css      | 0
 .../core/{js/alpine_theme_store.js => themeStore.js}      | 0
 mixtape/core/templates/core/insights/insights.html        | 8 +++++++-
 .../templates/core/insights/partials/_tabs_overview.html  | 7 -------
 mixtape/core/templates/core/shared/base.html              | 6 +++---
 7 files changed, 10 insertions(+), 11 deletions(-)
 rename mixtape/core/static/mixtape/core/{js/feedback_modal.js => feedbackModal.js} (100%)
 rename mixtape/core/static/mixtape/core/{js/alpine_insights_store.js => insights/insightsStore.js} (100%)
 rename mixtape/core/static/mixtape/core/{css => }/theme.css (100%)
 rename mixtape/core/static/mixtape/core/{js/alpine_theme_store.js => themeStore.js} (100%)

diff --git a/mixtape/core/static/mixtape/core/js/feedback_modal.js b/mixtape/core/static/mixtape/core/feedbackModal.js
similarity index 100%
rename from mixtape/core/static/mixtape/core/js/feedback_modal.js
rename to mixtape/core/static/mixtape/core/feedbackModal.js
diff --git a/mixtape/core/static/mixtape/core/js/alpine_insights_store.js b/mixtape/core/static/mixtape/core/insights/insightsStore.js
similarity index 100%
rename from mixtape/core/static/mixtape/core/js/alpine_insights_store.js
rename to mixtape/core/static/mixtape/core/insights/insightsStore.js
diff --git a/mixtape/core/static/mixtape/core/css/theme.css b/mixtape/core/static/mixtape/core/theme.css
similarity index 100%
rename from mixtape/core/static/mixtape/core/css/theme.css
rename to mixtape/core/static/mixtape/core/theme.css
diff --git a/mixtape/core/static/mixtape/core/js/alpine_theme_store.js b/mixtape/core/static/mixtape/core/themeStore.js
similarity index 100%
rename from mixtape/core/static/mixtape/core/js/alpine_theme_store.js
rename to mixtape/core/static/mixtape/core/themeStore.js
diff --git a/mixtape/core/templates/core/insights/insights.html b/mixtape/core/templates/core/insights/insights.html
index 5c90f1a..1c0ccb5 100644
--- a/mixtape/core/templates/core/insights/insights.html
+++ b/mixtape/core/templates/core/insights/insights.html
@@ -5,8 +5,14 @@
 
 {% block extra_head %}
   {{ block.super }}
-  <script src="{% static 'mixtape/core/js/alpine_insights_store.js' %}"></script>
+  <script src="{% static 'mixtape/core/insights/insightsStore.js' %}"></script>
   <script src="{% static 'mixtape/core/insights/settingsStore.js' %}"></script>
+  <script src="{% static 'mixtape/core/insights/insightsTabs.js' %}"></script>
+  <script src="{% static 'mixtape/core/insights/rewardsOverTimeDecomp.js' %}"></script>
+  <script src="{% static 'mixtape/core/insights/rewardsFrequency.js' %}"></script>
+  <script src="{% static 'mixtape/core/insights/actionsFrequency.js' %}"></script>
+  <script src="{% static 'mixtape/core/insights/rewardsOverTime.js' %}"></script>
+  <script src="{% static 'mixtape/core/insights/actionsRewards.js' %}"></script>
 {% endblock %}
 
 {% block content %}
diff --git a/mixtape/core/templates/core/insights/partials/_tabs_overview.html b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
index 11c770d..d0600e1 100644
--- a/mixtape/core/templates/core/insights/partials/_tabs_overview.html
+++ b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
@@ -1,10 +1,3 @@
-{% load static %}
-<script src="{% static 'mixtape/core/insights/insightsTabs.js' %}"></script>
-<script src="{% static 'mixtape/core/insights/rewardsOverTimeDecomp.js' %}"></script>
-<script src="{% static 'mixtape/core/insights/rewardsFrequency.js' %}"></script>
-<script src="{% static 'mixtape/core/insights/actionsFrequency.js' %}"></script>
-<script src="{% static 'mixtape/core/insights/rewardsOverTime.js' %}"></script>
-<script src="{% static 'mixtape/core/insights/actionsRewards.js' %}"></script>
 <div
   x-data="insightsTabs"
   x-cloak
diff --git a/mixtape/core/templates/core/shared/base.html b/mixtape/core/templates/core/shared/base.html
index b895318..eb5136f 100644
--- a/mixtape/core/templates/core/shared/base.html
+++ b/mixtape/core/templates/core/shared/base.html
@@ -12,10 +12,10 @@
     <script src="https://cdn.jsdelivr.net/npm/alpinejs/dist/cdn.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/plotly.js@3.0.1/dist/plotly.min.js" charset="utf-8"></script>
     <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet"/>
-    <script src="{% static 'mixtape/core/js/alpine_theme_store.js' %}"></script>
-    <script src="{% static 'mixtape/core/js/feedback_modal.js' %}"></script>
+    <script src="{% static 'mixtape/core/themeStore.js' %}"></script>
+    <script src="{% static 'mixtape/core/feedbackModal.js' %}"></script>
     <!-- Custom CSS Variables -->
-    <link rel="stylesheet" href="{% static 'mixtape/core/css/theme.css' %}">
+    <link rel="stylesheet" href="{% static 'mixtape/core/theme.css' %}">
     <title>{% block title %}MIXTAPE{% endblock %}</title>
     <style>
       [x-cloak] {

From dd12561320497a4feca55d46e380849c6ad6073c Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Sun, 18 Jan 2026 10:32:06 -0500
Subject: [PATCH 07/11] Move the `clustering` data to a dedicated file

---
 .../mixtape/core/insights/clustering.js       | 177 ++++++++++++++++
 .../templates/core/insights/clustering.html   | 190 ------------------
 .../templates/core/insights/insights.html     |   1 +
 .../insights/partials/_tabs_overview.html     |  28 ++-
 4 files changed, 204 insertions(+), 192 deletions(-)
 create mode 100644 mixtape/core/static/mixtape/core/insights/clustering.js
 delete mode 100644 mixtape/core/templates/core/insights/clustering.html

diff --git a/mixtape/core/static/mixtape/core/insights/clustering.js b/mixtape/core/static/mixtape/core/insights/clustering.js
new file mode 100644
index 0000000..ae0a0ab
--- /dev/null
+++ b/mixtape/core/static/mixtape/core/insights/clustering.js
@@ -0,0 +1,177 @@
+document.addEventListener('alpine:init', () => {
+  Alpine.data('clustering', (key, title) => ({
+    data: [],
+    layout: {
+      title: {text: `Agent ${title}`},
+      height: 450,
+      xaxis: {
+        gridcolor: Alpine.store('theme').gridColor,
+        linecolor: Alpine.store('theme').gridColor,
+        zeroline: false,
+      },
+      yaxis: {
+        gridcolor: Alpine.store('theme').gridColor,
+        linecolor: Alpine.store('theme').gridColor,
+        zeroline: false,
+      },
+      paper_bgcolor: Alpine.store('theme').backgroundColor,
+      plot_bgcolor: Alpine.store('theme').backgroundColor,
+      font: {
+        color: Alpine.store('theme').fontColor
+      },
+    },
+    plot: null,
+    init() {
+      if (this.$store.insights.clustering && this.$store.insights.clustering[key]) {
+        this.buildPlot();
+      }
+      this.$watch(
+        () => this.$store.insights.clustering && this.$store.insights.clustering[key],
+        (v) => { if (v) { this.buildPlot(); } }
+      );
+      Alpine.effect(() => {
+        if (!this.plot && this.$store.insights.clustering && this.$store.insights.clustering[key]) {
+          this.buildPlot();
+        }
+        if (this.plot) {
+          const numAgents = this.$store.insights.uniqueAgents.length;
+          const numEpisodes = this.$store.insights.episodeIds.length;
+          const currentStep = this.$store.insights.currentStep;
+
+          // Get the current plot data
+          const plotElement = this.$refs.allManifolds;
+          const currentData = plotElement.data;
+
+          // Remove the highlight trace if it exists (it will be last, at numEpisodes * numAgents + 1)
+          if (currentData && currentData.length > (numEpisodes * numAgents + 1)) {
+            Plotly.deleteTraces(this.$refs.allManifolds, [numEpisodes * numAgents + 1]);
+          }
+
+          // Create arrays for the highlighted points
+          const highlightX = [];
+          const highlightY = [];
+          const highlightText = [];
+
+          for (let agentIdx = 0; agentIdx < numAgents; agentIdx++) {
+            for (let episodeIdx = 0; episodeIdx < numEpisodes; episodeIdx++) {
+              const idx = episodeIdx + agentIdx * numEpisodes;
+              const agentTrace = currentData && currentData[idx];
+              if (agentTrace
+                  && Array.isArray(agentTrace.x)
+                  && currentStep < agentTrace.x.length
+                  && (!agentTrace.visible || agentTrace.visible === true)
+              ) {
+                highlightX.push(agentTrace.x[currentStep]);
+                highlightY.push(agentTrace.y[currentStep]);
+                const agents = this.$store.insights.uniqueAgents;
+                const episodes = this.$store.insights.episodeIds;
+                highlightText.push(`${agents[agentIdx]} Episode ${episodes[episodeIdx]}`);
+              }
+            }
+          }
+
+          // Only add the highlight trace if there are visible points
+          if (highlightX.length > 0) {
+            // Add new trace for highlighted points
+            const textPosition = [
+              'top left',
+              'middle left',
+              'bottom left',
+              'top center',
+              'middle center',
+              'bottom center',
+              'top right',
+              'middle right',
+              'bottom right'
+            ];
+            Plotly.addTraces(this.$refs.allManifolds, [{
+              x: highlightX,
+              y: highlightY,
+              text: highlightText,
+              type: 'scatter',
+              mode: 'markers+text',
+              showlegend: false,
+              textposition: textPosition,
+              textfont: {
+                size: 12,
+                color: this.$store.theme.fontColor
+              },
+              marker: {
+                color: 'transparent',
+                size: 20,
+                line: {
+                  width: 3,
+                  color: 'red'
+                }
+              }
+            }]);
+          }
+        }
+      });
+    },
+    resizePlot: _.debounce(function() {
+      if (!this.$refs.allManifolds.querySelector('.plotly')) return;
+      Plotly.Plots.resize(this.$refs.allManifolds);
+    }, 200, {leading: true}),
+    buildPlot() {
+      this.data = [];
+      const agents = this.$store.insights.uniqueAgents;
+      const episodes = this.$store.insights.episodeIds;
+      let clustering = null;
+      if (this.$store.insights.clustering) {
+        clustering = this.$store.insights.clustering
+      }
+      if (!clustering || !clustering[key]) return;
+      for (let agentIdx = 0; agentIdx < agents.length; agentIdx++) {
+        clustering[key].episode_manifolds.forEach((episodeManifold, episodeIdx) => {
+          const xCoords = [];
+          const yCoords = [];
+          episodeManifold.forEach(row => {
+            const embedding = Array.isArray(row) ? row[agentIdx] : null;
+            if (embedding && Array.isArray(embedding) && embedding.length >= 2) {
+              xCoords.push(embedding[0]); yCoords.push(embedding[1]);
+            }
+          });
+          this.data.push({
+            x: xCoords,
+            y: yCoords,
+            type: 'scatter',
+            mode: 'lines',
+            colorscale: 'YlOrRd',
+            line: { opacity: 1, width: 2 },
+            name: `Episode ${episodes[episodeIdx]} ${agents[agentIdx]}`
+          });
+        });
+      }
+      this.data.push({
+        x: clustering[key].all_manifolds_x,
+        y: clustering[key].all_manifolds_y,
+        type: 'scatter',
+        mode: 'markers',
+        marker: {
+          color: clustering[key].all_clusters,
+          cmin: 0,
+          cmax: 9,
+          colorscale: 'Viridis',
+          size: 20,
+          opacity: Array(clustering[key].all_manifolds_x.length).fill(1)
+        },
+        name: 'All Episodes'
+      });
+      this.plot = Plotly.newPlot(
+        this.$refs.allManifolds,
+        this.data,
+        this.layout,
+        { displayModeBar: false, responsive: true }
+      );
+      this.$watch('$store.settings.showPlotLegends', () => {
+        this.$nextTick(() => {
+          Plotly.relayout(this.$refs.allManifolds, {
+            autosize: true,
+            showlegend: this.$store.settings.showPlotLegends,
+          })
+        });
+      });
+    },
+  }));
+});
diff --git a/mixtape/core/templates/core/insights/clustering.html b/mixtape/core/templates/core/insights/clustering.html
deleted file mode 100644
index 680de61..0000000
--- a/mixtape/core/templates/core/insights/clustering.html
+++ /dev/null
@@ -1,190 +0,0 @@
-<div
-  x-data="{
-    data: [],
-    layout: {
-      title: {text: 'Agent {{title}}'},
-      height: 450,
-      xaxis: {
-        gridcolor: $store.theme.gridColor,
-        linecolor: $store.theme.gridColor,
-        zeroline: false,
-      },
-      yaxis: {
-        gridcolor: $store.theme.gridColor,
-        linecolor: $store.theme.gridColor,
-        zeroline: false,
-      },
-      paper_bgcolor: $store.theme.backgroundColor,
-      plot_bgcolor: $store.theme.backgroundColor,
-      font: {
-        color: $store.theme.fontColor
-      },
-    },
-    plot: null,
-    resizePlot: _.debounce(function() {
-      if (!this.$refs.allManifolds.querySelector('.plotly')) return;
-      Plotly.Plots.resize(this.$refs.allManifolds);
-    }, 200, {leading: true}),
-    buildPlot() {
-      this.data = [];
-      let agents = $store.insights.uniqueAgents;
-      let episodes = $store.insights.episodeIds;
-      let clustering = null;
-      if ($store.insights.clustering) {
-        clustering = $store.insights.clustering
-      };
-      if (!clustering || !clustering[{{key}}]) return;
-      for (let agentIdx = 0; agentIdx < agents.length; agentIdx++) {
-        clustering[{{key}}].episode_manifolds.forEach((episodeManifold, episodeIdx) => {
-          const xCoords = [];
-          const yCoords = [];
-          episodeManifold.forEach(row => {
-            const embedding = Array.isArray(row) ? row[agentIdx] : null;
-            if (embedding && Array.isArray(embedding) && embedding.length >= 2) {
-              xCoords.push(embedding[0]); yCoords.push(embedding[1]);
-            }
-          });
-          this.data.push({
-            x: xCoords,
-            y: yCoords,
-            type: 'scatter',
-            mode: 'lines',
-            colorscale: 'YlOrRd',
-            line: { opacity: 1, width: 2 },
-            name: `Episode ${episodes[episodeIdx]} ${agents[agentIdx]}`
-          });
-        });
-      }
-      this.data.push({
-        x: clustering[{{key}}].all_manifolds_x,
-        y: clustering[{{key}}].all_manifolds_y,
-        type: 'scatter',
-        mode: 'markers',
-        marker: {
-          color: clustering[{{key}}].all_clusters,
-          cmin: 0,
-          cmax: 9,
-          colorscale: 'Viridis',
-          size: 20,
-          opacity: Array(clustering[{{key}}].all_manifolds_x.length).fill(1)
-        },
-        name: 'All Episodes'
-      });
-      this.plot = Plotly.newPlot(
-        $refs.allManifolds,
-        this.data,
-        this.layout,
-        { displayModeBar: false, responsive: true }
-      );
-      this.$watch('$store.settings.showPlotLegends', () => {
-        this.$nextTick(() => {
-          Plotly.relayout($refs.allManifolds, {
-            autosize: true,
-            showlegend: this.$store.settings.showPlotLegends,
-          })
-        });
-      });
-    },
-  }"
-  x-init="
-    if ($store.insights.clustering && $store.insights.clustering[{{key}}]) {
-      buildPlot();
-    };
-    $watch(
-      () => $store.insights.clustering && $store.insights.clustering[{{key}}],
-      (v) => { if (v) { buildPlot(); } }
-    );
-  "
-  x-effect="() => {
-    if (!this.plot && $store.insights.clustering && $store.insights.clustering[{{key}}]) {
-      buildPlot();
-    }
-    if (this.plot) {
-      let numAgents = $store.insights.uniqueAgents.length;
-      let numEpisodes = $store.insights.episodeIds.length;
-      let currentStep = $store.insights.currentStep;
-
-      // Get the current plot data
-      const plotElement = $refs.allManifolds;
-      const currentData = plotElement.data;
-
-      // Remove the highlight trace if it exists (it will be last, at numEpisodes * numAgents + 1)
-      if (currentData && currentData.length > (numEpisodes * numAgents + 1)) {
-        Plotly.deleteTraces($refs.allManifolds, [numEpisodes * numAgents + 1]);
-      }
-
-      // Create arrays for the highlighted points
-      const highlightX = [];
-      const highlightY = [];
-      const highlightText = [];
-
-      for (let agentIdx = 0; agentIdx < numAgents; agentIdx++) {
-        for (let episodeIdx = 0; episodeIdx < numEpisodes; episodeIdx++) {
-          const idx = episodeIdx + agentIdx * numEpisodes;
-          const agentTrace = currentData && currentData[idx];
-          if (agentTrace
-              && Array.isArray(agentTrace.x)
-              && currentStep < agentTrace.x.length
-              && (!agentTrace.visible || agentTrace.visible === true)
-          ) {
-            highlightX.push(agentTrace.x[currentStep]);
-            highlightY.push(agentTrace.y[currentStep]);
-            let agents = $store.insights.uniqueAgents;
-            let episodes = $store.insights.episodeIds;
-            highlightText.push(`${agents[agentIdx]} Episode ${episodes[episodeIdx]}`);
-          }
-        }
-      }
-
-      // Only add the highlight trace if there are visible points
-      if (highlightX.length > 0) {
-        // Add new trace for highlighted points
-        const textPosition = [
-          'top left',
-          'middle left',
-          'bottom left',
-          'top center',
-          'middle center',
-          'bottom center',
-          'top right',
-          'middle right',
-          'bottom right'
-        ];
-        Plotly.addTraces($refs.allManifolds, [{
-          x: highlightX,
-          y: highlightY,
-          text: highlightText,
-          type: 'scatter',
-          mode: 'markers+text',
-          showlegend: false,
-          textposition: textPosition,
-          textfont: {
-            size: 12,
-            color: $store.theme.fontColor
-          },
-          marker: {
-            color: 'transparent',
-            size: 20,
-            line: {
-              width: 3,
-              color: 'red'
-            }
-          }
-        }]);
-      }
-    }
-  }"
-  x-resize="resizePlot"
-  >
-  <div
-    class="skeleton h-[450px] w-full"
-    x-show="!($store.insights.clustering && $store.insights.clustering[{{key}}])"
-    x-cloak
-  ></div>
-  <div
-    x-ref="allManifolds"
-    class="w-full"
-    x-show="$store.insights.clustering && $store.insights.clustering[{{key}}]"
-    x-cloak
-  ></div>
-</div>
diff --git a/mixtape/core/templates/core/insights/insights.html b/mixtape/core/templates/core/insights/insights.html
index 1c0ccb5..03f7b6e 100644
--- a/mixtape/core/templates/core/insights/insights.html
+++ b/mixtape/core/templates/core/insights/insights.html
@@ -13,6 +13,7 @@
   <script src="{% static 'mixtape/core/insights/actionsFrequency.js' %}"></script>
   <script src="{% static 'mixtape/core/insights/rewardsOverTime.js' %}"></script>
   <script src="{% static 'mixtape/core/insights/actionsRewards.js' %}"></script>
+  <script src="{% static 'mixtape/core/insights/clustering.js' %}"></script>
 {% endblock %}
 
 {% block content %}
diff --git a/mixtape/core/templates/core/insights/partials/_tabs_overview.html b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
index d0600e1..3a30261 100644
--- a/mixtape/core/templates/core/insights/partials/_tabs_overview.html
+++ b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
@@ -144,7 +144,19 @@ <h3 class="text-sm font-medium mb-2">Observations</h3>
             <div class="loading loading-spinner loading-xl text-primary" aria-hidden="true"></div>
           </div>
           <div class="space-y-3">
-            {% include "core/insights/clustering.html" with key="'obs'" title="Observations" %}
+            <div>
+              <div
+                class="skeleton h-[450px] w-full"
+                x-show="!($store.insights.clustering && $store.insights.clustering.obs)"
+                x-cloak
+              ></div>
+              <div
+                x-data="clustering('obs', 'Observations')" x-resize="resizePlot" x-ref="allManifolds"
+                x-show="$store.insights.clustering && $store.insights.clustering.obs"
+                class="w-full"
+                x-cloak
+              ></div>
+            </div>
             {% include "core/insights/clustering_timeline.html" with key="'obs'" title="Observations" %}
           </div>
         </section>
@@ -164,7 +176,19 @@ <h3 class="text-sm font-medium mb-2">Actions</h3>
             <div class="loading loading-spinner loading-xl text-primary" aria-hidden="true"></div>
           </div>
           <div class="space-y-3">
-            {% include "core/insights/clustering.html" with key="'agent_outs'" title="Actions" %}
+            <div>
+              <div
+                class="skeleton h-[450px] w-full"
+                x-show="!($store.insights.clustering && $store.insights.clustering.agent_outs)"
+                x-cloak
+              ></div>
+              <div
+                x-data="clustering('agent_outs', 'Actions')" x-resize="resizePlot" x-ref="allManifolds"
+                x-show="$store.insights.clustering && $store.insights.clustering.agent_outs"
+                class="w-full"
+                x-cloak
+              ></div>
+            </div>
             {% include "core/insights/clustering_timeline.html" with key="'agent_outs'" title="Actions" %}
           </div>
         </section>

From e1dd884be831d56198f0a41bc9b3c5d01da59862 Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Sun, 18 Jan 2026 10:32:06 -0500
Subject: [PATCH 08/11] Move the `clusteringTimeline` data to a dedicated file

---
 .../core/insights/clusteringTimeline.js       | 139 ++++++++++++++++
 .../core/insights/clustering_timeline.html    | 151 ------------------
 .../templates/core/insights/insights.html     |   1 +
 .../insights/partials/_tabs_overview.html     |  28 +++-
 4 files changed, 166 insertions(+), 153 deletions(-)
 create mode 100644 mixtape/core/static/mixtape/core/insights/clusteringTimeline.js
 delete mode 100644 mixtape/core/templates/core/insights/clustering_timeline.html

diff --git a/mixtape/core/static/mixtape/core/insights/clusteringTimeline.js b/mixtape/core/static/mixtape/core/insights/clusteringTimeline.js
new file mode 100644
index 0000000..063976a
--- /dev/null
+++ b/mixtape/core/static/mixtape/core/insights/clusteringTimeline.js
@@ -0,0 +1,139 @@
+document.addEventListener('alpine:init', () => {
+  Alpine.data('clusteringTimeline', (key, title) => ({
+    data: [],
+    layout: {
+      title: {text: `Agent ${title} Timeline`},
+      height: 300,
+      paper_bgcolor: Alpine.store('theme').backgroundColor,
+      plot_bgcolor: Alpine.store('theme').backgroundColor,
+      font: {
+        color: Alpine.store('theme').fontColor
+      },
+    },
+    plot: null,
+    init() {
+      if (this.$store.insights && this.$store.insights.clustering && this.$store.insights.clustering[key]) {
+        this.buildPlot();
+      }
+      this.$watch(
+        '$store.settings.timelineEpisodeIdx',
+        () => {
+          if (this.$store.insights && this.$store.insights.clustering && this.$store.insights.clustering[key]) {
+            this.buildPlot();
+          }
+        }
+      );
+      this.$watch(
+        () => this.$store.insights && this.$store.insights.clustering && this.$store.insights.clustering[key],
+        (v) => {
+          if (v) {
+            this.buildPlot();
+          }
+        }
+      );
+      Alpine.effect(() => {
+        if (
+          !this.plot
+          && this.$store.insights
+          && this.$store.insights.clustering && this.$store.insights.clustering[key]
+        ) { this.buildPlot(); }
+        if (this.plot) {
+          const plotElement = this.$refs.allManifolds;
+          const traces = plotElement && plotElement.data ? plotElement.data : null;
+          if (!traces || traces.length < 2) return;
+          let clustering = null;
+          if (this.$store.insights && this.$store.insights.clustering) {
+            clustering = this.$store.insights.clustering;
+          }
+          if (!clustering) return;
+          const epClusters = clustering[key]?.episode_clusters;
+          if (!epClusters) return;
+          const epIdx = this.$store.settings.timelineEpisodeIdx;
+          const zNow = Array.isArray(epClusters?.[0]?.[0])
+            ? (epClusters?.[epIdx] || epClusters?.[0] || [])
+            : epClusters;
+          if (!Array.isArray(zNow) || zNow.length === 0) { return; }
+          const agentsNow = zNow.length;
+          const yMin = 0;
+          const yMax = Math.max(0, (agentsNow || 1) - 1);
+          const step = this.$store.insights.currentStep;
+          const xLine = [step, step];
+          const yLine = [yMin - 0.5, yMax + 0.5];
+          // Use restyle: arguments must be arrays-of-arrays per selected trace
+          Plotly.restyle(this.$refs.allManifolds, { x: [xLine], y: [yLine] }, [1]);
+        }
+      });
+    },
+    resizePlot: _.debounce(function() {
+      if (!this.$refs.allManifolds.querySelector('.plotly')) return;
+      Plotly.Plots.resize(this.$refs.allManifolds);
+    }, 200, {leading: true}),
+    buildPlot() {
+      let clustering = null;
+      if (this.$store.insights && this.$store.insights.clustering) {
+        clustering = this.$store.insights.clustering;
+      }
+      if (!clustering || !clustering[key]) return;
+      const epClusters = clustering[key].episode_clusters;
+      const epIdx = this.$store.settings.timelineEpisodeIdx;
+      // If multi-episode shape [episodes][agents][steps], pick selected episode; else assume [agents][steps]
+      let agentStepClusters = Array.isArray(epClusters?.[0]?.[0])
+        ? (epClusters?.[epIdx] || epClusters?.[0] || [])
+        : epClusters;
+      // Pad each agent row to equal length [agents][steps]
+      const maxLen = Array.isArray(agentStepClusters)
+        ? Math.max(
+            ...agentStepClusters.map(r => (Array.isArray(r) ? r.length : 0))
+          )
+        : 0;
+      agentStepClusters = Array.isArray(agentStepClusters)
+        ? agentStepClusters.map(r => {
+            const row = Array.isArray(r) ? r.slice() : [];
+            while (row.length < maxLen) row.push(null);
+            return row;
+          })
+        : agentStepClusters;
+      const currentStepVal = this.$store.insights.currentStep;
+      const yVal = Array.isArray(agentStepClusters)
+        ? agentStepClusters.length - 1
+        : 1;
+      this.data = [
+        {
+          agentStepClusters: agentStepClusters,
+          type: 'heatmap',
+          showscale: false,
+          colorscale: 'YlGnBu',
+        },
+        {
+          x: [currentStepVal, currentStepVal],
+          y: [0, yVal],
+          type: 'scatter',
+          mode: 'lines',
+          showlegend: false,
+          line: { color: 'red', width: 4, opacity: 0.5 },
+        }
+      ];
+      this.plot = Plotly.newPlot(
+        this.$refs.allManifolds,
+        this.data,
+        this.layout,
+        {
+          displayModeBar: false,
+          responsive: true
+        }
+      );
+      this.$watch('$store.settings.showPlotLegends', () => {
+        this.$nextTick(() => {
+          Plotly.relayout(
+            this.$refs.allManifolds,
+            {
+              autosize: true,
+              showlegend: this.$store.settings.showPlotLegends
+            }
+          );
+        });
+      });
+    },
+
+  }));
+});
diff --git a/mixtape/core/templates/core/insights/clustering_timeline.html b/mixtape/core/templates/core/insights/clustering_timeline.html
deleted file mode 100644
index 453f2ae..0000000
--- a/mixtape/core/templates/core/insights/clustering_timeline.html
+++ /dev/null
@@ -1,151 +0,0 @@
-<div
-  x-data="{
-    data: [],
-    layout: {
-      title: {text: 'Agent {{title}} Timeline'},
-      height: 300,
-      paper_bgcolor: $store.theme.backgroundColor,
-      plot_bgcolor: $store.theme.backgroundColor,
-      font: {
-        color: $store.theme.fontColor
-      },
-    },
-    plot: null,
-    resizePlot: _.debounce(function() {
-      if (!this.$refs.allManifolds.querySelector('.plotly')) return;
-      Plotly.Plots.resize(this.$refs.allManifolds);
-    }, 200, {leading: true}),
-    buildPlot() {
-      let clustering = null;
-      if ($store.insights && $store.insights.clustering) {
-        clustering = $store.insights.clustering;
-      }
-      if (!clustering || !clustering[{{key}}]) return;
-      const epClusters = clustering[{{key}}].episode_clusters;
-      const epIdx = $store.settings.timelineEpisodeIdx;
-      // If multi-episode shape [episodes][agents][steps], pick selected episode; else assume [agents][steps]
-      let agentStepClusters = Array.isArray(epClusters?.[0]?.[0])
-        ? (epClusters?.[epIdx] || epClusters?.[0] || [])
-        : epClusters;
-      // Pad each agent row to equal length [agents][steps]
-      const maxLen = Array.isArray(agentStepClusters)
-        ? Math.max(
-            ...agentStepClusters.map(r => (Array.isArray(r) ? r.length : 0))
-          )
-        : 0;
-      agentStepClusters = Array.isArray(agentStepClusters)
-        ? agentStepClusters.map(r => {
-            const row = Array.isArray(r) ? r.slice() : [];
-            while (row.length < maxLen) row.push(null);
-            return row;
-          })
-        : agentStepClusters;
-      let currentStepVal = $store.insights.currentStep;
-      const yVal = Array.isArray(agentStepClusters)
-        ? agentStepClusters.length - 1
-        : 1;
-      this.data = [
-        {
-          agentStepClusters: agentStepClusters,
-          type: 'heatmap',
-          showscale: false,
-          colorscale: 'YlGnBu',
-        },
-        {
-          x: [currentStepVal, currentStepVal],
-          y: [0, yVal],
-          type: 'scatter',
-          mode: 'lines',
-          showlegend: false,
-          line: { color: 'red', width: 4, opacity: 0.5 },
-        }
-      ];
-      this.plot = Plotly.newPlot(
-        $refs.allManifolds,
-        this.data,
-        this.layout,
-        {
-          displayModeBar: false,
-          responsive: true
-        }
-      );
-      this.$watch('$store.settings.showPlotLegends', () => {
-        this.$nextTick(() => {
-          Plotly.relayout(
-            $refs.allManifolds,
-            {
-              autosize: true,
-              showlegend: $store.settings.showPlotLegends
-            }
-          );
-        });
-      });
-    },
-  }"
-  x-init="
-    if ($store.insights && $store.insights.clustering && $store.insights.clustering[{{key}}]) {
-      buildPlot();
-    }
-    $watch(
-      '$store.settings.timelineEpisodeIdx',
-      () => {
-        if ($store.insights && $store.insights.clustering && $store.insights.clustering[{{key}}]) {
-          buildPlot();
-        }
-      }
-    );
-    $watch(
-      () => $store.insights && $store.insights.clustering && $store.insights.clustering[{{key}}],
-      (v) => {
-        if (v) {
-          buildPlot();
-        }
-      }
-    );
-  "
-  x-effect="() => {
-    if (
-      !this.plot
-      && $store.insights
-      && $store.insights.clustering && $store.insights.clustering[{{key}}]
-    ) { buildPlot(); }
-    if (this.plot) {
-      const plotElement = $refs.allManifolds;
-      const traces = plotElement && plotElement.data ? plotElement.data : null;
-      if (!traces || traces.length < 2) return;
-      let clustering = null;
-      if ($store.insights && $store.insights.clustering) {
-        clustering = $store.insights.clustering;
-      }
-      if (!clustering) return;
-      const epClusters = clustering[{{key}}]?.episode_clusters;
-      if (!epClusters) return;
-      const epIdx = $store.settings.timelineEpisodeIdx;
-      const zNow = Array.isArray(epClusters?.[0]?.[0])
-        ? (epClusters?.[epIdx] || epClusters?.[0] || [])
-        : epClusters;
-      if (!Array.isArray(zNow) || zNow.length === 0) { return; }
-      const agentsNow = zNow.length;
-      const yMin = 0;
-      const yMax = Math.max(0, (agentsNow || 1) - 1);
-      const step = $store.insights.currentStep;
-      const xLine = [step, step];
-      const yLine = [yMin - 0.5, yMax + 0.5];
-      // Use restyle: arguments must be arrays-of-arrays per selected trace
-      Plotly.restyle($refs.allManifolds, { x: [xLine], y: [yLine] }, [1]);
-    }
-  }"
-  x-resize="resizePlot"
->
-  <div
-    class="skeleton h-[300px] w-full"
-    x-show="!($store.insights && $store.insights.clustering && $store.insights.clustering[{{key}}])"
-    x-cloak
-  ></div>
-  <div
-    x-ref="allManifolds"
-    class="w-full"
-    x-show="$store.insights && $store.insights.clustering && $store.insights.clustering[{{key}}]"
-    x-cloak
-  ></div>
-</div>
diff --git a/mixtape/core/templates/core/insights/insights.html b/mixtape/core/templates/core/insights/insights.html
index 03f7b6e..39bf515 100644
--- a/mixtape/core/templates/core/insights/insights.html
+++ b/mixtape/core/templates/core/insights/insights.html
@@ -14,6 +14,7 @@
   <script src="{% static 'mixtape/core/insights/rewardsOverTime.js' %}"></script>
   <script src="{% static 'mixtape/core/insights/actionsRewards.js' %}"></script>
   <script src="{% static 'mixtape/core/insights/clustering.js' %}"></script>
+  <script src="{% static 'mixtape/core/insights/clusteringTimeline.js' %}"></script>
 {% endblock %}
 
 {% block content %}
diff --git a/mixtape/core/templates/core/insights/partials/_tabs_overview.html b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
index 3a30261..63b499e 100644
--- a/mixtape/core/templates/core/insights/partials/_tabs_overview.html
+++ b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
@@ -157,7 +157,19 @@ <h3 class="text-sm font-medium mb-2">Observations</h3>
                 x-cloak
               ></div>
             </div>
-            {% include "core/insights/clustering_timeline.html" with key="'obs'" title="Observations" %}
+            <div>
+              <div
+                class="skeleton h-[300px] w-full"
+                x-show="!($store.insights && $store.insights.clustering && $store.insights.clustering.obs)"
+                x-cloak
+              ></div>
+              <div
+                x-data="clusteringTimeline('obs', 'Observations')" x-resize="resizePlot" x-ref="allManifolds"
+                x-show="$store.insights && $store.insights.clustering && $store.insights.clustering.obs"
+                class="w-full"
+                x-cloak
+              ></div>
+            </div>
           </div>
         </section>
         <section
@@ -189,7 +201,19 @@ <h3 class="text-sm font-medium mb-2">Actions</h3>
                 x-cloak
               ></div>
             </div>
-            {% include "core/insights/clustering_timeline.html" with key="'agent_outs'" title="Actions" %}
+            <div>
+              <div
+                class="skeleton h-[300px] w-full"
+                x-show="!($store.insights && $store.insights.clustering && $store.insights.clustering.agent_outs)"
+                x-cloak
+              ></div>
+              <div
+                x-data="clusteringTimeline('agent_outs', 'Actions')" x-resize="resizePlot" x-ref="allManifolds"
+                x-show="$store.insights && $store.insights.clustering && $store.insights.clustering.agent_outs"
+                class="w-full"
+                x-cloak
+              ></div>
+            </div>
           </div>
         </section>
       </div>

From c18d8a04799b785968e121ec848725e04d5e148b Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Sun, 18 Jan 2026 10:32:07 -0500
Subject: [PATCH 09/11] Replace use of `$ref` with `$el`

---
 .../mixtape/core/insights/actionsFrequency.js  |  8 ++++----
 .../mixtape/core/insights/actionsRewards.js    |  8 ++++----
 .../static/mixtape/core/insights/clustering.js | 14 +++++++-------
 .../core/insights/clusteringTimeline.js        | 12 ++++++------
 .../mixtape/core/insights/rewardsFrequency.js  |  8 ++++----
 .../mixtape/core/insights/rewardsOverTime.js   | 10 +++++-----
 .../core/insights/rewardsOverTimeDecomp.js     | 10 +++++-----
 .../core/insights/partials/_tabs_overview.html | 18 +++++++++---------
 8 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/mixtape/core/static/mixtape/core/insights/actionsFrequency.js b/mixtape/core/static/mixtape/core/insights/actionsFrequency.js
index db76a01..d6d8e8a 100644
--- a/mixtape/core/static/mixtape/core/insights/actionsFrequency.js
+++ b/mixtape/core/static/mixtape/core/insights/actionsFrequency.js
@@ -41,11 +41,11 @@ document.addEventListener('alpine:init', () => {
           }
         });
       });
-      this.plot = Plotly.react(this.$refs.actionsFrequency, this.data, this.layout, this.config);
+      this.plot = Plotly.react(this.$el, this.data, this.layout, this.config);
       this.$watch('$store.settings.showPlotLegends', () => {
         this.$nextTick(() => {
           Plotly.relayout(
-            this.$refs.actionsFrequency,
+            this.$el,
             {
               autosize: true,
               showlegend: this.$store.settings.showPlotLegends
@@ -54,8 +54,8 @@ document.addEventListener('alpine:init', () => {
       });
     },
     resizePlot: _.debounce(function () {
-      if (!this.$refs.actionsFrequency.querySelector('.plotly')) return;
-      Plotly.Plots.resize(this.$refs.actionsFrequency);
+      if (!this.$el.querySelector('.plotly')) return;
+      Plotly.Plots.resize(this.$el);
     }, 200, {leading: true}),
   }));
 });
diff --git a/mixtape/core/static/mixtape/core/insights/actionsRewards.js b/mixtape/core/static/mixtape/core/insights/actionsRewards.js
index 334333a..4c853f8 100644
--- a/mixtape/core/static/mixtape/core/insights/actionsRewards.js
+++ b/mixtape/core/static/mixtape/core/insights/actionsRewards.js
@@ -41,11 +41,11 @@ document.addEventListener('alpine:init', () => {
           }
         }
       }));
-      this.plot = Plotly.react(this.$refs.actionsRewards, this.data, this.layout, this.config);
+      this.plot = Plotly.react(this.$el, this.data, this.layout, this.config);
       this.$watch('$store.settings.showPlotLegends', () => {
         this.$nextTick(() => {
           Plotly.relayout(
-            this.$refs.actionsRewards, {
+            this.$el, {
               autosize: true,
               showlegend: this.$store.settings.showPlotLegends
             })
@@ -53,8 +53,8 @@ document.addEventListener('alpine:init', () => {
       });
     },
     resizePlot: _.debounce(function() {
-      if (!this.$refs.actionsRewards.querySelector('.plotly')) return;
-      Plotly.Plots.resize(this.$refs.actionsRewards);
+      if (!this.$el.querySelector('.plotly')) return;
+      Plotly.Plots.resize(this.$el);
     }, 200, {leading: true}),
   }));
 });
diff --git a/mixtape/core/static/mixtape/core/insights/clustering.js b/mixtape/core/static/mixtape/core/insights/clustering.js
index ae0a0ab..eac8aa2 100644
--- a/mixtape/core/static/mixtape/core/insights/clustering.js
+++ b/mixtape/core/static/mixtape/core/insights/clustering.js
@@ -39,12 +39,12 @@ document.addEventListener('alpine:init', () => {
           const currentStep = this.$store.insights.currentStep;
 
           // Get the current plot data
-          const plotElement = this.$refs.allManifolds;
+          const plotElement = this.$el;
           const currentData = plotElement.data;
 
           // Remove the highlight trace if it exists (it will be last, at numEpisodes * numAgents + 1)
           if (currentData && currentData.length > (numEpisodes * numAgents + 1)) {
-            Plotly.deleteTraces(this.$refs.allManifolds, [numEpisodes * numAgents + 1]);
+            Plotly.deleteTraces(this.$el, [numEpisodes * numAgents + 1]);
           }
 
           // Create arrays for the highlighted points
@@ -84,7 +84,7 @@ document.addEventListener('alpine:init', () => {
               'middle right',
               'bottom right'
             ];
-            Plotly.addTraces(this.$refs.allManifolds, [{
+            Plotly.addTraces(this.$el, [{
               x: highlightX,
               y: highlightY,
               text: highlightText,
@@ -110,8 +110,8 @@ document.addEventListener('alpine:init', () => {
       });
     },
     resizePlot: _.debounce(function() {
-      if (!this.$refs.allManifolds.querySelector('.plotly')) return;
-      Plotly.Plots.resize(this.$refs.allManifolds);
+      if (!this.$el.querySelector('.plotly')) return;
+      Plotly.Plots.resize(this.$el);
     }, 200, {leading: true}),
     buildPlot() {
       this.data = [];
@@ -159,14 +159,14 @@ document.addEventListener('alpine:init', () => {
         name: 'All Episodes'
       });
       this.plot = Plotly.newPlot(
-        this.$refs.allManifolds,
+        this.$el,
         this.data,
         this.layout,
         { displayModeBar: false, responsive: true }
       );
       this.$watch('$store.settings.showPlotLegends', () => {
         this.$nextTick(() => {
-          Plotly.relayout(this.$refs.allManifolds, {
+          Plotly.relayout(this.$el, {
             autosize: true,
             showlegend: this.$store.settings.showPlotLegends,
           })
diff --git a/mixtape/core/static/mixtape/core/insights/clusteringTimeline.js b/mixtape/core/static/mixtape/core/insights/clusteringTimeline.js
index 063976a..4a926b3 100644
--- a/mixtape/core/static/mixtape/core/insights/clusteringTimeline.js
+++ b/mixtape/core/static/mixtape/core/insights/clusteringTimeline.js
@@ -38,7 +38,7 @@ document.addEventListener('alpine:init', () => {
           && this.$store.insights.clustering && this.$store.insights.clustering[key]
         ) { this.buildPlot(); }
         if (this.plot) {
-          const plotElement = this.$refs.allManifolds;
+          const plotElement = this.$el;
           const traces = plotElement && plotElement.data ? plotElement.data : null;
           if (!traces || traces.length < 2) return;
           let clustering = null;
@@ -60,13 +60,13 @@ document.addEventListener('alpine:init', () => {
           const xLine = [step, step];
           const yLine = [yMin - 0.5, yMax + 0.5];
           // Use restyle: arguments must be arrays-of-arrays per selected trace
-          Plotly.restyle(this.$refs.allManifolds, { x: [xLine], y: [yLine] }, [1]);
+          Plotly.restyle(this.$el, { x: [xLine], y: [yLine] }, [1]);
         }
       });
     },
     resizePlot: _.debounce(function() {
-      if (!this.$refs.allManifolds.querySelector('.plotly')) return;
-      Plotly.Plots.resize(this.$refs.allManifolds);
+      if (!this.$el.querySelector('.plotly')) return;
+      Plotly.Plots.resize(this.$el);
     }, 200, {leading: true}),
     buildPlot() {
       let clustering = null;
@@ -114,7 +114,7 @@ document.addEventListener('alpine:init', () => {
         }
       ];
       this.plot = Plotly.newPlot(
-        this.$refs.allManifolds,
+        this.$el,
         this.data,
         this.layout,
         {
@@ -125,7 +125,7 @@ document.addEventListener('alpine:init', () => {
       this.$watch('$store.settings.showPlotLegends', () => {
         this.$nextTick(() => {
           Plotly.relayout(
-            this.$refs.allManifolds,
+            this.$el,
             {
               autosize: true,
               showlegend: this.$store.settings.showPlotLegends
diff --git a/mixtape/core/static/mixtape/core/insights/rewardsFrequency.js b/mixtape/core/static/mixtape/core/insights/rewardsFrequency.js
index 27d6aa9..88be9b1 100644
--- a/mixtape/core/static/mixtape/core/insights/rewardsFrequency.js
+++ b/mixtape/core/static/mixtape/core/insights/rewardsFrequency.js
@@ -41,11 +41,11 @@ document.addEventListener('alpine:init', () => {
           }
         });
       });
-      this.plot = Plotly.newPlot(this.$refs.rewardsFrequency, this.data, this.layout, this.config);
+      this.plot = Plotly.newPlot(this.$el, this.data, this.layout, this.config);
       this.$watch('$store.settings.showPlotLegends', () => {
         this.$nextTick(() => {
           Plotly.relayout(
-            this.$refs.rewardsFrequency,
+            this.$el,
             {
               autosize: true,
               showlegend: this.$store.settings.showPlotLegends
@@ -54,8 +54,8 @@ document.addEventListener('alpine:init', () => {
       });
     },
     resizePlot: _.debounce(function() {
-      if (!this.$refs.rewardsFrequency.querySelector('.plotly')) return;
-      Plotly.Plots.resize(this.$refs.rewardsFrequency);
+      if (!this.$el.querySelector('.plotly')) return;
+      Plotly.Plots.resize(this.$el);
     }, 200, {leading: true}),
   }));
 });
diff --git a/mixtape/core/static/mixtape/core/insights/rewardsOverTime.js b/mixtape/core/static/mixtape/core/insights/rewardsOverTime.js
index 642042b..18dac1f 100644
--- a/mixtape/core/static/mixtape/core/insights/rewardsOverTime.js
+++ b/mixtape/core/static/mixtape/core/insights/rewardsOverTime.js
@@ -61,11 +61,11 @@ document.addEventListener('alpine:init', () => {
         },
         name: 'Current Step'
       });
-      this.plot = Plotly.newPlot(this.$refs.rewardsOverTime, this.data, this.layout, this.config);
+      this.plot = Plotly.newPlot(this.$el, this.data, this.layout, this.config);
       this.$watch('$store.settings.showPlotLegends', () => {
         this.$nextTick(() => {
           Plotly.relayout(
-            this.$refs.rewardsOverTime,
+            this.$el,
             {
               autosize: true,
               showlegend: this.$store.settings.showPlotLegends
@@ -74,7 +74,7 @@ document.addEventListener('alpine:init', () => {
       });
       Alpine.effect(() => {
         if (this.plot) {
-          Plotly.update(this.$refs.rewardsOverTime, {
+          Plotly.update(this.$el, {
             x: [[this.$store.insights.currentStep, this.$store.insights.currentStep]],
             y: [[Math.min(...this.$store.insights.rewardsOverTime.flat()), Math.max(...this.$store.insights.rewardsOverTime.flat())]]
           }, {
@@ -90,8 +90,8 @@ document.addEventListener('alpine:init', () => {
       });
     },
     resizePlot: _.debounce(function() {
-      if (!this.$refs.rewardsOverTime.querySelector('.plotly')) return;
-      Plotly.Plots.resize(this.$refs.rewardsOverTime);
+      if (!this.$el.querySelector('.plotly')) return;
+      Plotly.Plots.resize(this.$el);
     }, 200, {leading: true}),
     getStep(episode) {
       if (this.$store.insights.currentStep < Object.keys(episode).length) {
diff --git a/mixtape/core/static/mixtape/core/insights/rewardsOverTimeDecomp.js b/mixtape/core/static/mixtape/core/insights/rewardsOverTimeDecomp.js
index 88a44d7..b874fd5 100644
--- a/mixtape/core/static/mixtape/core/insights/rewardsOverTimeDecomp.js
+++ b/mixtape/core/static/mixtape/core/insights/rewardsOverTimeDecomp.js
@@ -35,7 +35,7 @@ document.addEventListener('alpine:init', () => {
       this.$watch('$store.settings.showPlotLegends', () => {
         this.$nextTick(() => {
           Plotly.relayout(
-            this.$refs.rewardsOverTime,
+            this.$el,
             {
               autosize: true,
               showlegend: this.$store.settings.showPlotLegends
@@ -70,11 +70,11 @@ document.addEventListener('alpine:init', () => {
       // Add annotations for current step values
       this.layout.annotations = this.createAnnotations();
 
-      this.plot = Plotly.newPlot(this.$refs.rewardsOverTime, this.data, this.layout, {displayModeBar: false});
+      this.plot = Plotly.newPlot(this.$el, this.data, this.layout, {displayModeBar: false});
     },
     resizePlot: _.debounce(function() {
-      if (!this.$refs.rewardsOverTime.querySelector('.plotly')) return;
-      Plotly.Plots.resize(this.$refs.rewardsOverTime);
+      if (!this.$el.querySelector('.plotly')) return;
+      Plotly.Plots.resize(this.$el);
     }, 200, {leading: true}),
     createShapes(allYValues) {
       const maxY = Math.max(...allYValues);
@@ -130,7 +130,7 @@ document.addEventListener('alpine:init', () => {
           });
         });
 
-        Plotly.relayout(this.$refs.rewardsOverTime, {
+        Plotly.relayout(this.$el, {
           shapes: this.createShapes(allYValues),
           annotations: this.createAnnotations()
         });
diff --git a/mixtape/core/templates/core/insights/partials/_tabs_overview.html b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
index 63b499e..73b6591 100644
--- a/mixtape/core/templates/core/insights/partials/_tabs_overview.html
+++ b/mixtape/core/templates/core/insights/partials/_tabs_overview.html
@@ -81,7 +81,7 @@
           x-show="$store.settings.showPlotRewardFrequency"
         >
           <div class="min-h-[18rem]">
-            <div x-data="rewardsFrequency" x-ref="rewardsFrequency" x-resize="resizePlot" class="w-full"></div>
+            <div x-data="rewardsFrequency" x-resize="resizePlot" class="w-full"></div>
           </div>
         </section>
         <section
@@ -89,7 +89,7 @@
           x-show="$store.settings.showPlotActionFrequency"
         >
           <div class="min-h-[18rem]">
-            <div x-data="actionsFrequency" x-ref="actionsFrequency" x-resize="resizePlot" class="w-full"></div>
+            <div x-data="actionsFrequency" x-resize="resizePlot" class="w-full"></div>
           </div>
         </section>
         <section
@@ -97,7 +97,7 @@
           x-show="$store.settings.showPlotActionRewardFrequency"
         >
           <div class="min-h-[18rem]">
-            <div x-data="actionsRewards" x-ref="actionsRewards" x-resize="resizePlot" class="w-full"></div>
+            <div x-data="actionsRewards" x-resize="resizePlot" class="w-full"></div>
           </div>
         </section>
       </div>
@@ -110,7 +110,7 @@
           x-show="$store.settings.showPlotRewardsTime"
         >
           <div class="min-h-[18rem]">
-            <div x-data="rewardsOverTime" x-ref="rewardsOverTime" x-resize="resizePlot" class="w-full"></div>
+            <div x-data="rewardsOverTime" x-resize="resizePlot" class="w-full"></div>
           </div>
         </section>
         {% if has_reward_mapping %}
@@ -119,7 +119,7 @@
           x-show="$store.settings.showPlotRewardsTime"
         >
           <div class="min-h-[18rem]">
-            <div x-data="rewardsOverTimeDecomp" x-ref="rewardsOverTime" x-resize="resizePlot"></div>
+            <div x-data="rewardsOverTimeDecomp" x-resize="resizePlot"></div>
           </div>
         </section>
         {% endif %}
@@ -151,7 +151,7 @@ <h3 class="text-sm font-medium mb-2">Observations</h3>
                 x-cloak
               ></div>
               <div
-                x-data="clustering('obs', 'Observations')" x-resize="resizePlot" x-ref="allManifolds"
+                x-data="clustering('obs', 'Observations')" x-resize="resizePlot"
                 x-show="$store.insights.clustering && $store.insights.clustering.obs"
                 class="w-full"
                 x-cloak
@@ -164,7 +164,7 @@ <h3 class="text-sm font-medium mb-2">Observations</h3>
                 x-cloak
               ></div>
               <div
-                x-data="clusteringTimeline('obs', 'Observations')" x-resize="resizePlot" x-ref="allManifolds"
+                x-data="clusteringTimeline('obs', 'Observations')" x-resize="resizePlot"
                 x-show="$store.insights && $store.insights.clustering && $store.insights.clustering.obs"
                 class="w-full"
                 x-cloak
@@ -195,7 +195,7 @@ <h3 class="text-sm font-medium mb-2">Actions</h3>
                 x-cloak
               ></div>
               <div
-                x-data="clustering('agent_outs', 'Actions')" x-resize="resizePlot" x-ref="allManifolds"
+                x-data="clustering('agent_outs', 'Actions')" x-resize="resizePlot"
                 x-show="$store.insights.clustering && $store.insights.clustering.agent_outs"
                 class="w-full"
                 x-cloak
@@ -208,7 +208,7 @@ <h3 class="text-sm font-medium mb-2">Actions</h3>
                 x-cloak
               ></div>
               <div
-                x-data="clusteringTimeline('agent_outs', 'Actions')" x-resize="resizePlot" x-ref="allManifolds"
+                x-data="clusteringTimeline('agent_outs', 'Actions')" x-resize="resizePlot"
                 x-show="$store.insights && $store.insights.clustering && $store.insights.clustering.agent_outs"
                 class="w-full"
                 x-cloak

From 67cbf1ca47d31f16dd9f769385ee9c526d5c59a7 Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Sun, 18 Jan 2026 10:32:08 -0500
Subject: [PATCH 10/11] Add a "replay" data

---
 .../mixtape/core/insights/insightsTabs.js     | 27 -------------------
 .../static/mixtape/core/insights/replay.js    | 21 +++++++++++++++
 .../templates/core/insights/insights.html     |  1 +
 .../core/insights/replay_controls.html        |  6 ++---
 .../core/insights/replay_details.html         | 13 ---------
 5 files changed, 25 insertions(+), 43 deletions(-)
 create mode 100644 mixtape/core/static/mixtape/core/insights/replay.js
 delete mode 100644 mixtape/core/templates/core/insights/replay_details.html

diff --git a/mixtape/core/static/mixtape/core/insights/insightsTabs.js b/mixtape/core/static/mixtape/core/insights/insightsTabs.js
index a252ed2..a32e955 100644
--- a/mixtape/core/static/mixtape/core/insights/insightsTabs.js
+++ b/mixtape/core/static/mixtape/core/insights/insightsTabs.js
@@ -4,14 +4,9 @@ document.addEventListener('alpine:init', () => {
     active: 'Overview',
     maxStepsCount: null,
     avgRewardDisplay: null,
-    maxSteps: 0,
-    maxStepsGlobal: 0,
     episodeSummaries: [],
     mediaEpisodeIdx: 0,
     linkMediaToEpisode: true,
-    limitToEpisode: false,
-    debug: false,
-    playing: false,
     pollTimer: null,
     showToast: false,
     toastText: '',
@@ -25,9 +20,6 @@ document.addEventListener('alpine:init', () => {
     pollBeforeUnloadHandler: null,
 
     init() {
-      this.maxStepsGlobal = (this.$store.insights.parsedData?.max_steps ?? 1) - 1;
-      this.maxSteps = this.maxStepsGlobal;
-
       // Average reward
       const avgReward = this.computeAverageReward(this.$store.insights.parsedData);
       this.avgRewardDisplay = (avgReward ?? null) !== null ? Number(avgReward).toFixed(2) : null;
@@ -45,10 +37,7 @@ document.addEventListener('alpine:init', () => {
       })();
 
       // Build watchers
-      this.updateMaxSteps();
-      this.$watch('limitToEpisode', () => this.updateMaxSteps());
       this.$watch('$store.settings.timelineEpisodeIdx', () => {
-        this.updateMaxSteps();
         if (this.linkMediaToEpisode) this.mediaEpisodeIdx = this.$store.settings.timelineEpisodeIdx;
       });
       this.$watch('episodeSummaries', () => {
@@ -59,8 +48,6 @@ document.addEventListener('alpine:init', () => {
         }
       });
       this.$watch('linkMediaToEpisode', (v) => { if (v) { this.mediaEpisodeIdx = this.$store.settings.timelineEpisodeIdx; } });
-      // Ensure timeline mode changes recompute limits
-      this.$watch('$store.settings.useGlobalTimeline', this.updateMaxSteps);
 
       // Store
       const store = (window.Alpine && Alpine.store('insights')) || null;
@@ -79,20 +66,6 @@ document.addEventListener('alpine:init', () => {
         this.startClusteringPolling();
       }
     },
-
-    stepForward() {
-      if (!this.playing) return;
-      if (this.$store.insights.currentStep < this.maxSteps) {
-        const delay = Math.max(50, Math.round(500 / (this.$store.settings.playbackSpeed || 1)));
-        setTimeout(() => { this.$store.insights.currentStep++; this.stepForward(); }, delay);
-      } else { this.playing = false; this.$store.insights.currentStep = 0; }
-    },
-    updateMaxSteps() {
-      if (this.limitToEpisode) {
-        const steps = this.episodeSummaries[this.$store.settings.timelineEpisodeIdx]?.steps ?? null;
-        this.maxSteps = (typeof steps === 'number' && steps > 0) ? steps - 1 : this.maxStepsGlobal;
-      } else { this.maxSteps = this.maxStepsGlobal; }
-    },
     selectTab(tab) {
       this.active = tab;
     },
diff --git a/mixtape/core/static/mixtape/core/insights/replay.js b/mixtape/core/static/mixtape/core/insights/replay.js
new file mode 100644
index 0000000..115956a
--- /dev/null
+++ b/mixtape/core/static/mixtape/core/insights/replay.js
@@ -0,0 +1,21 @@
+document.addEventListener('alpine:init', () => {
+  Alpine.data('replay', () => ({
+    playing: false,
+    maxSteps: Alpine.store('insights').parsedData.max_steps - 1,
+    stepForward() {
+      if (!this.playing) {
+        return;
+      }
+      if (this.$store.insights.currentStep < this.maxSteps) {
+        const delay = Math.max(50, Math.round(500 / (this.$store.settings.playbackSpeed || 1)));
+        setTimeout(() => {
+          this.$store.insights.currentStep++;
+          this.stepForward();
+        }, delay);
+      } else {
+        this.playing = false;
+        this.$store.insights.currentStep = 0;
+      }
+    },
+  }));
+});
diff --git a/mixtape/core/templates/core/insights/insights.html b/mixtape/core/templates/core/insights/insights.html
index 39bf515..63b3ed0 100644
--- a/mixtape/core/templates/core/insights/insights.html
+++ b/mixtape/core/templates/core/insights/insights.html
@@ -7,6 +7,7 @@
   {{ block.super }}
   <script src="{% static 'mixtape/core/insights/insightsStore.js' %}"></script>
   <script src="{% static 'mixtape/core/insights/settingsStore.js' %}"></script>
+  <script src="{% static 'mixtape/core/insights/replay.js' %}"></script>
   <script src="{% static 'mixtape/core/insights/insightsTabs.js' %}"></script>
   <script src="{% static 'mixtape/core/insights/rewardsOverTimeDecomp.js' %}"></script>
   <script src="{% static 'mixtape/core/insights/rewardsFrequency.js' %}"></script>
diff --git a/mixtape/core/templates/core/insights/replay_controls.html b/mixtape/core/templates/core/insights/replay_controls.html
index 1ac36bc..c41d37f 100644
--- a/mixtape/core/templates/core/insights/replay_controls.html
+++ b/mixtape/core/templates/core/insights/replay_controls.html
@@ -1,4 +1,4 @@
-<section class="flex items-center justify-center w-full gap-2 px-2 py-1 border border-base-300 rounded-lg">
+<section x-data="replay" class="flex items-center justify-center w-full gap-2 px-2 py-1 border border-base-300 rounded-lg">
   <button
     class="btn btn-ghost btn-sm"
     :disabled="$store.insights.currentStep === 0"
@@ -40,9 +40,9 @@
       type="number"
       class="input input-sm validator w-16 text-center"
       min="0"
-      :max="maxStepsGlobal"
+      :max="maxSteps"
       x-model.number="$store.insights.currentStep"
     />
-    <span class="text-xs">/ <span x-text="maxStepsGlobal"></span></span>
+    <span class="text-xs">/ <span x-text="maxSteps"></span></span>
   </div>
 </section>
diff --git a/mixtape/core/templates/core/insights/replay_details.html b/mixtape/core/templates/core/insights/replay_details.html
deleted file mode 100644
index a99c465..0000000
--- a/mixtape/core/templates/core/insights/replay_details.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-<div class="flex justify-evenly overflow-y-auto grid grid-cols-12 col-span-3 flex-col card-alt">
-  <template x-for="agent_step in getStep(step).agent_steps">
-    <div class="m-1 p-1 col-span-12 h-min">
-      <p class="flex justify-evenly">
-        <p><strong>Agent:</strong> <span x-text="agent_step.agent"></span></p>
-        <p><strong>Action:</strong> <span x-text="agent_step.action"></span></p>
-        <p><strong>Reward:</strong> <span x-text="agent_step.total_reward"></span></p>
-      </p>
-    </div>
-  </template>
-  <p x-show="!getStep(step)?.agent_steps?.length" class="text-center">End of episode</p>
-</div>

From 8078931f47e5c5ee7da825e2bcc558b7d5b62b5e Mon Sep 17 00:00:00 2001
From: Brian Helba <brian.helba@kitware.com>
Date: Sun, 18 Jan 2026 10:32:09 -0500
Subject: [PATCH 11/11] Simplify timeline logic

---
 .../static/mixtape/core/insights/insightsStore.js | 14 ++++++--------
 .../static/mixtape/core/insights/insightsTabs.js  | 15 ---------------
 .../core/templates/core/insights/timeline.html    | 12 ++++--------
 3 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/mixtape/core/static/mixtape/core/insights/insightsStore.js b/mixtape/core/static/mixtape/core/insights/insightsStore.js
index 5800911..01cb858 100644
--- a/mixtape/core/static/mixtape/core/insights/insightsStore.js
+++ b/mixtape/core/static/mixtape/core/insights/insightsStore.js
@@ -15,7 +15,6 @@ document.addEventListener('alpine:init', () => {
     actionVFrequency: {},
     stepData: [],
     timelineKeySteps: [],
-    timelineKeyStepsGlobal: [],
 
     // User-configurable flags
     episodeSummaries: [],
@@ -40,13 +39,12 @@ document.addEventListener('alpine:init', () => {
       this.episodeIds = this.parsedData.episode_ids;
       this.uniqueAgents = this.parsedData.unique_agents;
       this.rewardsOverTime = this.parsedData.rewards_over_time;
-      this.decomposedRewards = this.parsedData?.decomposed_rewards ?? [];
-      this.actionVReward = this.parsedData?.action_v_reward ?? {};
-      this.rewardHistogram = this.parsedData?.reward_histogram ?? [];
-      this.actionVFrequency = this.parsedData?.action_v_frequency ?? {};
-      this.stepData = this.parsedData?.step_data ?? [];
-      this.timelineKeySteps = this.parsedData?.timeline_key_steps ?? [];
-      this.timelineKeyStepsGlobal = this.parsedData?.timeline_key_steps_global ?? [];
+      this.decomposedRewards = this.parsedData.decomposed_rewards;
+      this.actionVReward = this.parsedData.action_v_reward;
+      this.rewardHistogram = this.parsedData.reward_histogram;
+      this.actionVFrequency = this.parsedData.action_v_frequency;
+      this.stepData = this.parsedData.step_data;
+      this.timelineKeySteps = this.parsedData.timeline_key_steps;
     },
   });
 });
diff --git a/mixtape/core/static/mixtape/core/insights/insightsTabs.js b/mixtape/core/static/mixtape/core/insights/insightsTabs.js
index a32e955..009a689 100644
--- a/mixtape/core/static/mixtape/core/insights/insightsTabs.js
+++ b/mixtape/core/static/mixtape/core/insights/insightsTabs.js
@@ -79,21 +79,6 @@ document.addEventListener('alpine:init', () => {
           .map((episodeSummary) => `Ep ${episodeSummary.id}: ${episodeSummary.steps ?? '-'}`)
       ].join('\n');
     },
-    timelineTitle(ts) {
-      if (Array.isArray(ts?.episodes)) {
-        const parts = ts.episodes.map(e => `Episode ${e.episode_id}: ${Number(e.total_rewards ?? 0).toFixed(2)}`);
-        return `Step ${ts.number}\n${parts.join('\n')}`;
-      }
-      return `Step ${ts?.number} — Reward: ${Number((ts && ts.total_rewards) ?? 0).toFixed(2)}`;
-    },
-    timelineAria(ts) {
-      if (Array.isArray(ts?.episodes)) {
-        const parts = ts.episodes.map(e => `Episode ${e.episode_id}: ${Number(e.total_rewards ?? 0).toFixed(2)}`);
-        return `Step ${ts.number} ${parts.join(', ')}`;
-      }
-      return `Step ${ts?.number} Reward ${Number((ts && ts.total_rewards) ?? 0).toFixed(2)}`;
-    },
-
     // helpers for templates
     getEpisodeStepIndex(epIdx) {
       const steps = this.$store.insights.stepData?.[epIdx] || {};
diff --git a/mixtape/core/templates/core/insights/timeline.html b/mixtape/core/templates/core/insights/timeline.html
index 1ebfeb6..c60981a 100644
--- a/mixtape/core/templates/core/insights/timeline.html
+++ b/mixtape/core/templates/core/insights/timeline.html
@@ -1,21 +1,17 @@
 <section x-cloak class="border border-base-300 rounded-lg flex">
   <ol class="items-center flex p-1 w-full">
     <li class="relative flex items-center"><div class="flex w-1 bg-primary h-6 ml-2"></div></li>
-    <template x-for="ts in (($store.settings.useGlobalTimeline && $store.insights.timelineKeyStepsGlobal.length)
-                              ? $store.insights.timelineKeyStepsGlobal
-                              : (($store.insights.timelineKeySteps && $store.insights.timelineKeySteps[$store.settings.timelineEpisodeIdx])
-                                  ? $store.insights.timelineKeySteps[$store.settings.timelineEpisodeIdx]
-                                  : (($store.insights.timelineKeySteps && $store.insights.timelineKeySteps[0]) ? $store.insights.timelineKeySteps[0] : [])))">
+    <template x-for="ts in $store.insights.timelineKeySteps[$store.settings.timelineEpisodeIdx]">
       <li class="relative w-full flex even:flex-col odd:flex-col-reverse even:mb-5 odd:mt-5" :key="ts.number">
-        <p class="text-sm text-center" x-text="Number((ts.peak_total_rewards ?? ts.total_rewards) ?? 0).toFixed(2)"></p>
+        <p class="text-sm text-center" x-text="ts.total_rewards.toFixed(2)"></p>
         <div class="flex items-center">
             <div class="flex w-full bg-primary h-0.5"></div>
             <button
               class="cursor-pointer z-10 flex items-center justify-center w-2 h-2 rounded-full ring-4 shrink-0"
               :class="$store.insights.currentStep === ts.number ? 'ring-[var(--color-primary-content)] bg-primary' : 'ring-[var(--color-primary)]'"
               @click="$store.insights.currentStep = ts.number"
-              :title="timelineTitle(ts)"
-              :aria-label="timelineAria(ts)"
+              :title="`Step ${ts.number} — Reward: ${ts.total_rewards.toFixed(2)}`"
+              :aria-label="`Step ${ts.number} Reward ${ts.total_rewards.toFixed(2)}`"
             >
             </button>
             <div class="flex w-full bg-primary h-0.5"></div>