Remove stage buttons, add refresh button, load all previews on desktop

app.js

@@ -11,7 +11,6 @@
   let allClips = [];
   let baseUrl = '';
   let activeCategory = 'all';
-  let activeStage = 'policy';
   const isMobile = window.matchMedia('(max-width: 480px)').matches;
 
   // ------------------------------------
@@ -33,7 +32,6 @@
       updateStats(data.stats);
       filterAndRender();
       setupCategoryButtons();
-      setupStageButtons();
       setupModal();
       setupScrollReveal();
     } catch (err) {
@@ -181,26 +179,25 @@
     card.className = 'clip-card';
     card.dataset.clipId = clip.id;
 
-    const stageData = clip.stages[activeStage];
-    const mediaSrc = stageData
-      ? mediaUrl(stageData)
-      : null;
-    const isVideo = mediaSrc && mediaSrc.endsWith('.mp4');
-    const useViewer = activeStage === 'policy' && clip.has_onnx;
-
-    const stages = ['capture', 'retarget', 'training', 'policy'];
+    const useViewer = clip.has_onnx;
+    var viewerUrl = 'viewer.html?clip=' + encodeURIComponent(clip.id) +
+      '&category=' + encodeURIComponent(clip.category);
 
     var mediaHtml;
     if (useViewer) {
-      mediaHtml = '<iframe data-src="viewer.html?clip=' + encodeURIComponent(clip.id) +
-        '&category=' + encodeURIComponent(clip.category) +
+      mediaHtml = '<iframe data-src="' + viewerUrl +
         '&embed=1" class="lazy-iframe" allowtransparency="true" style="width:100%;height:100%;border:none;"></iframe>';
-    } else if (mediaSrc) {
-      mediaHtml = isVideo
-        ? '<video data-src="' + mediaSrc + '" autoplay muted loop playsinline preload="none" class="lazy-video"></video>'
-        : '<img data-src="' + mediaSrc + '" alt="' + escHtml(clip.name) + '" loading="lazy">';
     } else {
-      mediaHtml = '<div class="card-placeholder">Not available</div>';
+      var stageData = clip.stages.policy || clip.stages.training || clip.stages.retarget || clip.stages.capture;
+      var mediaSrc = stageData ? mediaUrl(stageData) : null;
+      var isVideo = mediaSrc && mediaSrc.endsWith('.mp4');
+      if (mediaSrc) {
+        mediaHtml = isVideo
+          ? '<video data-src="' + mediaSrc + '" autoplay muted loop playsinline preload="none" class="lazy-video"></video>'
+          : '<img data-src="' + mediaSrc + '" alt="' + escHtml(clip.name) + '" loading="lazy">';
+      } else {
+        mediaHtml = '<div class="card-placeholder">Not available</div>';
+      }
     }
 
     card.innerHTML =
@@ -216,21 +213,14 @@
           '<span class="card-separator"></span>' +
           '<span>' + clip.performer + '</span>' +
         '</div>' +
-        '<div class="card-stages">' +
-          stages.map(function (s) {
-            var has = !!clip.stages[s];
-            var active = s === activeStage;
-            var cls = 'card-stage-btn' +
-              (active ? ' active' : '') +
-              (has ? '' : ' disabled');
-            return '<button class="' + cls + '" data-stage="' + s + '"' +
-              (has ? '' : ' disabled') +
-              ' title="' + capitalize(s) + '">' +
-              s.charAt(0).toUpperCase() +
-              '</button>';
-          }).join('') +
+        '<div class="card-actions">' +
+          (useViewer
+            ? '<button class="card-refresh-btn" title="Reload viewer">' +
+              '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>' +
+              '</button>'
+            : '') +
           (clip.has_policy
-            ? '<a class="card-view-btn" href="viewer.html?clip=' + encodeURIComponent(clip.id) + '&category=' + encodeURIComponent(clip.category) + '" title="Run policy in browser">' +
+            ? '<a class="card-view-btn" href="' + viewerUrl + '" title="Run policy in browser">' +
               '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>' +
               'View' +
               '</a>'
@@ -243,71 +233,29 @@
       openModal(clip);
     });
 
-    // Per-card stage buttons
-    var stageBtns = card.querySelectorAll('.card-stage-btn:not(.disabled)');
-    for (var i = 0; i < stageBtns.length; i++) {
-      stageBtns[i].addEventListener('click', (function (btn) {
-        return function (e) {
-          e.stopPropagation();
-          switchCardStage(card, clip, btn.dataset.stage);
-        };
-      })(stageBtns[i]));
+    // Refresh button
+    var refreshBtn = card.querySelector('.card-refresh-btn');
+    if (refreshBtn) {
+      refreshBtn.addEventListener('click', function (e) {
+        e.stopPropagation();
+        var iframe = card.querySelector('iframe');
+        if (iframe) {
+          var src = iframe.dataset.src || iframe.src;
+          iframe.src = 'about:blank';
+          setTimeout(function () { iframe.src = src; }, 50);
+        }
+      });
     }
 
     return card;
   }
 
-  function switchCardStage(card, clip, stage) {
-    var stageData = clip.stages[stage];
-    if (!stageData) return;
-
-    var useViewer = stage === 'policy' && clip.has_onnx;
-    var src = mediaUrl(stageData);
-    var isVideo = src && src.endsWith('.mp4');
-    var existing = card.querySelector('.card-media img, .card-media video, .card-media iframe');
-    var placeholder = card.querySelector('.card-placeholder');
-    var target = existing || placeholder;
-
-    if (target) {
-      var newEl;
-      if (useViewer) {
-        newEl = document.createElement('iframe');
-        newEl.src = 'viewer.html?clip=' + encodeURIComponent(clip.id) +
-          '&category=' + encodeURIComponent(clip.category) + '&embed=1';
-        newEl.style.cssText = 'width:100%;height:100%;border:none;';
-        newEl.setAttribute('allowtransparency', 'true');
-      } else if (isVideo) {
-        newEl = document.createElement('video');
-        newEl.src = src;
-        newEl.autoplay = true;
-        newEl.muted = true;
-        newEl.loop = true;
-        newEl.playsInline = true;
-      } else {
-        newEl = document.createElement('img');
-        newEl.src = src;
-        newEl.alt = clip.name;
-      }
-      target.replaceWith(newEl);
-    }
-
-    // Update active state on buttons
-    var btns = card.querySelectorAll('.card-stage-btn');
-    for (var i = 0; i < btns.length; i++) {
-      btns[i].classList.toggle('active', btns[i].dataset.stage === stage);
-    }
-  }
-
   // ------------------------------------
-  // Lazy loading (with iframe cap)
+  // Lazy loading
   // ------------------------------------
   var lazyObserver = null;
-  var iframeObserver = null;
-  var MAX_IFRAMES = 5;
-  var activeIframes = new Set();
 
   function observeLazyImages() {
-    // Standard lazy loading for images and videos
     if (!lazyObserver) {
       lazyObserver = new IntersectionObserver(function (entries) {
         entries.forEach(function (entry) {
@@ -315,75 +263,17 @@
             var el = entry.target;
             if (el.dataset.src) {
               el.src = el.dataset.src;
-              el.removeAttribute('data-src');
             }
             lazyObserver.unobserve(el);
           }
         });
-      }, { rootMargin: isMobile ? '100px' : '300px' });
+      }, { rootMargin: '300px' });
     }
 
-    var lazyMedia = grid.querySelectorAll('img[data-src], video[data-src]');
+    var lazyMedia = grid.querySelectorAll('img[data-src], video[data-src], iframe.lazy-iframe[data-src]');
     for (var i = 0; i < lazyMedia.length; i++) {
       lazyObserver.observe(lazyMedia[i]);
     }
-
-    // Capped iframe loading: max MAX_IFRAMES active at once
-    // When an iframe leaves the viewport, unload it to free memory
-    if (!iframeObserver) {
-      iframeObserver = new IntersectionObserver(function (entries) {
-        entries.forEach(function (entry) {
-          var iframe = entry.target;
-          if (entry.isIntersecting) {
-            // Want to load — check if we have capacity
-            if (activeIframes.size < MAX_IFRAMES) {
-              loadIframe(iframe);
-            }
-            // If at capacity, this iframe stays queued (data-src set, no src)
-          } else {
-            // Left viewport — unload to free memory
-            unloadIframe(iframe);
-          }
-        });
-        // After processing exits, try to fill any freed slots
-        fillIframeSlots();
-      }, { rootMargin: isMobile ? '100px' : '300px' });
-    }
-
-    var iframes = grid.querySelectorAll('iframe.lazy-iframe');
-    for (var i = 0; i < iframes.length; i++) {
-      iframeObserver.observe(iframes[i]);
-    }
-  }
-
-  function loadIframe(iframe) {
-    if (activeIframes.has(iframe)) return;
-    if (iframe.dataset.src) {
-      iframe.src = iframe.dataset.src;
-      activeIframes.add(iframe);
-    }
-  }
-
-  function unloadIframe(iframe) {
-    if (!activeIframes.has(iframe)) return;
-    iframe.src = 'about:blank';
-    activeIframes.delete(iframe);
-  }
-
-  function fillIframeSlots() {
-    if (activeIframes.size >= MAX_IFRAMES) return;
-    // Find visible iframes that aren't loaded yet
-    var iframes = grid.querySelectorAll('iframe.lazy-iframe[data-src]');
-    for (var i = 0; i < iframes.length; i++) {
-      if (activeIframes.size >= MAX_IFRAMES) break;
-      if (activeIframes.has(iframes[i])) continue;
-      // Check if it's currently in the viewport
-      var rect = iframes[i].getBoundingClientRect();
-      var margin = isMobile ? 100 : 300;
-      if (rect.bottom > -margin && rect.top < window.innerHeight + margin) {
-        loadIframe(iframes[i]);
-      }
-    }
   }
 
   // ------------------------------------
@@ -425,20 +315,6 @@
     }
   }
 
-  // ------------------------------------
-  // Global stage buttons
-  // ------------------------------------
-  function setupStageButtons() {
-    var btns = document.querySelectorAll('.global-stage-btn');
-    for (var i = 0; i < btns.length; i++) {
-      btns[i].addEventListener('click', function () {
-        setActiveBtn('.global-stage-btn', this);
-        activeStage = this.dataset.stage;
-        filterAndRender();
-      });
-    }
-  }
-
   function setActiveBtn(selector, activeEl) {
     var btns = document.querySelectorAll(selector);
     for (var i = 0; i < btns.length; i++) {
@@ -554,10 +430,6 @@
     return m + ':' + (s < 10 ? '0' : '') + s;
   }
 
-  function capitalize(str) {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-  }
-
   function escHtml(str) {
     var div = document.createElement('div');
     div.textContent = str;

g1-moves/space/CLAUDE.md

@@ -0,0 +1,7 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+*No recent activity*
+</claude-mem-context>

index.html

@@ -79,13 +79,6 @@
       <button class="category-btn" data-category="karate">Karate</button>
       <button class="category-btn" data-category="bonus">Bonus</button>
     </div>
-    <div class="filter-group">
-      <span class="filter-label">Stage</span>
-      <button class="global-stage-btn" data-stage="capture">Capture</button>
-      <button class="global-stage-btn" data-stage="retarget">Retarget</button>
-      <button class="global-stage-btn" data-stage="training">Training</button>
-      <button class="global-stage-btn active" data-stage="policy">Policy</button>
-    </div>
   </section>
 
   <!-- Gallery -->

style.css

@@ -279,8 +279,7 @@ a:hover { opacity: 0.8; }
   margin-right: 0.4rem;
 }
 
-.category-btn,
-.global-stage-btn {
+.category-btn {
   font-family: var(--font-mono);
   font-size: 0.7rem;
   letter-spacing: 0.04em;
@@ -293,14 +292,12 @@ a:hover { opacity: 0.8; }
   transition: all 0.2s;
 }
 
-.category-btn:hover,
-.global-stage-btn:hover {
+.category-btn:hover {
   border-color: var(--border-hover);
   color: var(--text-primary);
 }
 
-.category-btn.active,
-.global-stage-btn.active {
+.category-btn.active {
   background: var(--accent-dim);
   border-color: rgba(0, 212, 255, 0.35);
   color: var(--accent);
@@ -479,42 +476,34 @@ a:hover { opacity: 0.8; }
   background: var(--text-tertiary);
 }
 
-.card-stages {
+.card-actions {
   display: flex;
-  gap: 0.3rem;
+  align-items: center;
+  gap: 0.4rem;
 }
 
-.card-stage-btn {
-  width: 26px;
-  height: 26px;
+.card-refresh-btn {
+  width: 28px;
+  height: 28px;
   border-radius: 4px;
   border: 1px solid var(--border);
   background: transparent;
   color: var(--text-secondary);
-  font-family: var(--font-mono);
-  font-size: 0.6rem;
-  font-weight: 600;
   cursor: pointer;
   transition: all 0.15s;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0;
 }
 
-.card-stage-btn:hover:not(.disabled) {
-  border-color: rgba(0, 212, 255, 0.4);
-  color: var(--accent);
-}
-
-.card-stage-btn.active {
-  background: var(--accent-dim);
-  border-color: rgba(0, 212, 255, 0.35);
+.card-refresh-btn:hover {
+  border-color: var(--accent);
   color: var(--accent);
 }
 
-.card-stage-btn.disabled {
-  opacity: 0.2;
-  cursor: default;
+.card-refresh-btn svg {
+  flex-shrink: 0;
 }
 
 .card-view-btn {
@@ -1076,8 +1065,6 @@ footer {
   .card-info { padding: 0.6rem 0.75rem 0.75rem; }
   .card-title { font-size: 0.85rem; }
   .card-meta { font-size: 0.65rem; }
-  .card-stage-btn { width: 24px; height: 24px; font-size: 0.55rem; }
-
   .pipeline-strip { transform: scale(0.7); }
 
   .stats-bar { gap: 1rem 2rem; }