Add selectable model cards with saved per-panel preferences

app.js

@@ -137,6 +137,7 @@ function overview() {
   current={type:'overview'};
   $('#main').innerHTML=`<section class="hero"><div><div class="eyebrow"><span class="tiny-logo">✦</span> RLE-Bench · Embodied agent evaluation</div><h1>Coding agents.<br><span>Physical tasks.</span></h1><p>Compare native success, token usage and recorded behavior.<br>Every result opens into the full agent session and its evidence.</p></div><div class="hero-facts"><div><strong>${data.families.length}</strong><span>environment</span></div><div><strong>${data.tasks.length}</strong><span>distinct tasks</span></div><div><strong>${data.variants.length}</strong><span>agent–model variants</span></div><span class="progress-label"><i></i>${data.benchmark_complete?'Evaluation complete':'Evaluation in progress'} · selected seeds</span></div></section>
   <div class="agent-cards">${data.variants.map(v=>{const s=stats(episodes(v.id));return `<a class="agent-card ${s.n?'':'planned'}" href="#runs/${v.id}" style="--variant:${colors[v.id]}"><div class="card-header"><span class="agent-name">${icon(v)}${esc(v.label||v.agent)}</span><span class="state-label">${s.n===plannedTasks(v.id).length?'Complete':s.n?'Partial':'Planned'}</span></div><p class="card-model">${modelLabel(v)}</p><div class="card-rate"><strong>${pct(s.rate)}</strong><span>native success</span></div><div class="card-stats"><span><b>${s.n?s.passes+' / '+s.n:'—'}</b> passed</span><span class="card-cost" title="${esc(costNote(s))}"><b>${costValue(s)}</b> total cost<small>Estimated USD</small></span></div><div class="completion-track"><span style="width:${s.n/plannedTasks(v.id).length*100}%"></span></div><div class="card-bottom"><span>${s.n} / ${plannedTasks(v.id).length} evaluated</span><span>${s.n?'Explore runs':'View planned'} ${arrow}</span></div></a>`;}).join('')}</div><div id="comparison-mount">${comparisonTable()}</div><a class="audit-launcher" href="#instructions"><div><strong>Instructions audit</strong><p>Compare current RLE goals with native descriptions, runtime language pools and recorded episode instructions.</p></div><span aria-hidden="true">↗</span></a>${taskBrowser()}${methodology()}`;
+  ModelCards.mount($('.agent-cards'), 'easy');
   renderRows();
 }
 function runsPage(variant,params,restoredFilters=null) {

comparison-layout.css

@@ -10,8 +10,8 @@
 .column-picker-actions{display:flex;gap:16px;flex-shrink:0;padding-top:3px}
 .column-picker-actions button:disabled{opacity:.4;cursor:default;text-decoration:none}
 .task-column-options{display:flex;flex-wrap:wrap;gap:8px}
-.task-column-toggle{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:7px;background:var(--paper,#fff);text-align:left;font-size:11px;line-height:1.5;color:var(--muted)}
-.task-column-toggle:hover{border-color:var(--variant);color:var(--ink)}
+.task-column-toggle,.model-card-toggle{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:7px;background:var(--paper,#fff);text-align:left;font-size:11px;line-height:1.5;color:var(--muted)}
+.task-column-toggle:hover,.model-card-toggle:hover{border-color:var(--variant);color:var(--ink)}
 .task-column-toggle[aria-expanded=true]{border-color:var(--variant);color:var(--ink);background:color-mix(in srgb,var(--variant) 8%,white)}
 .column-toggle-icon{font-size:16px;line-height:1;color:var(--variant);width:13px;text-align:center;flex-shrink:0}
 .task-column-label{display:flex;align-items:center;justify-content:center;gap:8px}
@@ -33,7 +33,7 @@
   .task-column-picker{padding:16px}
   .column-picker-heading{flex-direction:column;gap:10px}
   .task-column-options{gap:7px}
-  .task-column-toggle{font-size:11px;padding:8px 10px}
+  .task-column-toggle,.model-card-toggle{font-size:11px;padding:8px 10px}
   .task-browser .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
   .task-browser .filters .search-field{grid-column:1/-1;min-width:0}
   .task-browser .filters select{width:100%;max-width:100%;font-size:11px}
@@ -44,3 +44,12 @@
   .task-column-label{font-size:11px}
   .comparison-total>th{background:var(--lavender,#f4f3fc)!important}
 }
+/* Model-card controls share the task column selector's visual language. */
+.model-card-picker{padding:20px 22px;margin-bottom:18px}
+.model-card-picker h2{font-size:14px;font-weight:600;line-height:1.6}
+.model-card-toggle{cursor:pointer}
+.model-card-toggle input{width:15px;height:15px;margin:0;flex-shrink:0;accent-color:var(--variant)}
+.model-card-toggle.selected{border-color:var(--variant);color:var(--ink);background:color-mix(in srgb,var(--variant) 8%,white)}
+.model-card-toggle:focus-within{outline:2px solid var(--variant);outline-offset:2px}
+.agent-card[hidden],.agent-cards[hidden]{display:none}
+@media(max-width:600px){.model-card-picker{padding:16px}}

hard/app.js

@@ -162,6 +162,7 @@ function overview() {
   current={type:'overview'};
   $('#main').innerHTML=`<section class="hero"><div><div class="eyebrow"><span class="tiny-logo">✦</span> RLE-Bench · Embodied agent evaluation</div><h1>RoboTwin 2.0.<br><span>Hard evaluation.</span></h1><p>demo_randomized · one episode per selected task.<br>Kinex and the paired Kinex + VLA study use RLE revised instructions; four standalone VLA checkpoints retain native instructions.</p></div><div class="hero-facts"><div><strong>${data.families.length}</strong><span>environment</span></div><div><strong>${data.tasks.length}</strong><span>distinct tasks</span></div><div><strong>${data.variants.length}</strong><span>agent–model variants</span></div><span class="progress-label"><i></i>${data.benchmark_complete?'Evaluation complete':'Evaluation in progress'} · selected seeds</span></div></section>
   ${researchRerunNote()}${recordingPilotProgress()}${opusPilotProgress()}<div class="agent-cards">${data.variants.map(v=>{const s=stats(episodes(v.id));return `<a class="agent-card ${s.n?'':'planned'}" href="#runs/${v.id}" style="--variant:${colors[v.id]}"><div class="card-header"><span class="agent-name">${icon(v)}${esc(v.label||v.agent)}</span><span class="state-label">${s.n===plannedTasks(v.id).length?'Complete':s.n?'Partial':'Planned'}</span></div><p class="card-model">${modelLabel(v)}</p><div class="card-rate"><strong>${pct(s.rate)}</strong><span>native success</span></div><div class="card-stats"><span><b>${s.n?s.passes+' / '+s.n:'—'}</b> passed</span><span class="card-cost" title="${esc(costNote(s))}"><b>${costValue(s)}</b> total cost<small>Estimated USD</small></span></div><div class="completion-track"><span style="width:${s.n/plannedTasks(v.id).length*100}%"></span></div><div class="card-bottom"><span>${s.n} / ${plannedTasks(v.id).length} evaluated</span><span>${s.n?'Explore runs':'View planned'} ${arrow}</span></div></a>`;}).join('')}</div><div id="comparison-mount">${comparisonTable()}</div><a class="audit-launcher" href="#instructions"><div><strong>Instructions audit</strong><p>Compare current RLE goals with native descriptions, runtime language pools and recorded episode instructions.</p></div><span aria-hidden="true">↗</span></a>${taskBrowser()}${methodology()}`;
+  ModelCards.mount($('.agent-cards'), 'hard');
   renderRows();
 }
 function runsPage(variant,params,restoredFilters=null) {

hard/index.html

@@ -10,10 +10,11 @@
 <link rel="stylesheet" href="style.css?v=bd1a59147e1d">
 <script src="usage-metrics.js?v=330e92f8eb96" defer></script>
 <script src="../instruction-audit.js?v=7b5e9a418dec" defer></script>
-<script src="app.js?v=fc277dc28280" defer></script>
+<script src="../model-cards.js?v=7e115b1b03ae" defer></script>
+<script src="app.js?v=f3726a435e5a" defer></script>
 <link rel="stylesheet" href="policy.css">
 <link rel="stylesheet" href="../instruction-audit.css?v=43163fc879ed">
-<link rel="stylesheet" href="../comparison-layout.css?v=aae6b25c444d">
+<link rel="stylesheet" href="../comparison-layout.css?v=359bdb6df354">
 </head>
 <body>
 <a class="skip" href="#main">Skip to content</a>

index.html

@@ -10,10 +10,11 @@
 <link rel="stylesheet" href="style.css?v=bd1a59147e1d">
 <script src="usage-metrics.js?v=330e92f8eb96" defer></script>
 <script src="instruction-audit.js?v=7b5e9a418dec" defer></script>
-<script src="app.js?v=6a2a1e7891fd" defer></script>
+<script src="model-cards.js?v=7e115b1b03ae" defer></script>
+<script src="app.js?v=f71de61b433f" defer></script>
 <link rel="stylesheet" href="policy.css">
 <link rel="stylesheet" href="instruction-audit.css?v=43163fc879ed">
-<link rel="stylesheet" href="comparison-layout.css?v=aae6b25c444d">
+<link rel="stylesheet" href="comparison-layout.css?v=359bdb6df354">
 </head>
 <body>
 <a class="skip" href="#main">Skip to content</a>

manifest.json

@@ -11,8 +11,8 @@
       "sha256": "43163fc879edcc6dcc6e3c6bc1faa058d1ac3fd914fcb05302c5ca08640ef7d5"
     },
     "app.js": {
-      "bytes": 90441,
-      "sha256": "6a2a1e7891fd129ac04bf69c801f52011bd7cb116a343a00c8188833906a5e23"
+      "bytes": 90488,
+      "sha256": "f71de61b433f0fc697cebd64de61946f3f7dcb78dc4a004999d036e8f45033f0"
     },
     "history-app.js": {
       "bytes": 87082,
@@ -43,8 +43,8 @@
       "sha256": "8b0691838063224bce2a991d7bb0672897ef8f51bbc39ce38afb4a67cb6e39d0"
     },
     "index.html": {
-      "bytes": 3677,
-      "sha256": "86b2b2f4d4a48f3195bb4be038a8cac76b1c370a93e2d29be95f5683efd1b1ac"
+      "bytes": 3737,
+      "sha256": "ef983eb864632472732fcdd442f42721e6012b3baf387455a47c9a836a04282d"
     },
     "policy.css": {
       "bytes": 1067,
@@ -99,8 +99,8 @@
       "sha256": "a53108594a23b740fbb08623f6fffdda1d73608b552988a9ffda9f0944ae66a1"
     },
     "hard/app.js": {
-      "bytes": 96918,
-      "sha256": "fc277dc2828030bc73d1eba68d10aaed1e776337f0dccd7c2fa98792f0fd0362"
+      "bytes": 96965,
+      "sha256": "f3726a435e5a27b4e5d1a91cf5595ebf2a596c09d3b880e091abda3d9b444294"
     },
     "hard/icon.svg": {
       "bytes": 725,
@@ -111,8 +111,8 @@
       "sha256": "330e92f8eb9670cb506f2909a2a47ee8f0bd569199898df3bfa044239ae64161"
     },
     "hard/index.html": {
-      "bytes": 3715,
-      "sha256": "7c9c9ae696af37bcd3cf57c6621f703c4f445ba05da4473fbb4e706da3a3c46a"
+      "bytes": 3778,
+      "sha256": "20effb13ec316f38bd30abbeb11448325489a8ef11fd69ba8111c63a4d43b208"
     },
     "hard/policy.css": {
       "bytes": 1067,
@@ -127,8 +127,8 @@
       "sha256": "23354b68f8b32d82eb6a4a0cac7432ff4d1f18351d9b757d70b99a705f556597"
     },
     "plus/app.js": {
-      "bytes": 96747,
-      "sha256": "ca53816fe6c83bcc07e0476fd4e85da80cb4c41fec223eca77211d792d417344"
+      "bytes": 96794,
+      "sha256": "71a4927bc597ddbb4e58dcb344e191a1dbd3ae1e3808781f5007a9764417e8f1"
     },
     "plus/icon.svg": {
       "bytes": 725,
@@ -139,8 +139,8 @@
       "sha256": "330e92f8eb9670cb506f2909a2a47ee8f0bd569199898df3bfa044239ae64161"
     },
     "plus/index.html": {
-      "bytes": 3710,
-      "sha256": "2d5f4ba98c87cb65532465da3d8766f650b7c1ac626898d8188a121cd2b3c74e"
+      "bytes": 3773,
+      "sha256": "5ebf6595592196b0538bfc5670085958744e68cf4389026959eee43a11f25c7a"
     },
     "plus/policy.css": {
       "bytes": 1067,
@@ -231,8 +231,12 @@
       "sha256": "63cef0604b0afd9b163634068b1c8aaaf3285e60e4bed3809f1ebe0d60552b13"
     },
     "comparison-layout.css": {
-      "bytes": 3660,
-      "sha256": "aae6b25c444d0d5607e0f3c90f418b613703915f7de84eb55daf3b97e7e4e6a0"
+      "bytes": 4387,
+      "sha256": "359bdb6df354c6ff81e167720d5e1898724483e28a84dcfd6d49dd90380f2b7e"
+    },
+    "model-cards.js": {
+      "bytes": 3400,
+      "sha256": "7e115b1b03ae5c273e579aa93603199db23060d7b8af764ade90199bf47dfc4a"
     }
   },
   "hard_dataset": {

model-cards.js

@@ -0,0 +1,80 @@
+/* Model-card visibility is saved separately for each benchmark panel. */
+window.ModelCards = (() => {
+  const selections = new Map();
+
+  function mount(grid, panel) {
+    const storageKey = `programvla:model-cards:${panel}`;
+    if (!selections.has(panel)) {
+      let saved = [];
+      try {
+        const value = JSON.parse(localStorage.getItem(storageKey));
+        if (Array.isArray(value)) saved = value.filter(id => typeof id === 'string');
+      } catch {}
+      selections.set(panel, new Set(saved));
+    }
+    const hidden = selections.get(panel);
+    const picker = document.createElement('section');
+    picker.className = 'panel model-card-picker';
+    picker.setAttribute('aria-labelledby', 'model-card-picker-title');
+    picker.innerHTML = `<div class="column-picker-heading"><div>
+      <h2 id="model-card-picker-title">Models to display</h2>
+      <p id="model-card-status" role="status"></p>
+      </div><div class="column-picker-actions">
+      <button type="button" class="text-button" data-model-cards="all">Show all</button>
+      <button type="button" class="text-button" data-model-cards="none">Hide all</button>
+      </div></div><div class="task-column-options" role="group" aria-label="Models to display"></div>`;
+    const options = picker.querySelector('.task-column-options');
+    const items = [...grid.querySelectorAll('.agent-card')].map(card => {
+      const id = card.getAttribute('href').slice('#runs/'.length);
+      card.id = `model-card-${id}`;
+      const label = document.createElement('label');
+      label.className = 'model-card-toggle';
+      label.style.setProperty('--variant', card.style.getPropertyValue('--variant'));
+      label.title = card.querySelector('.card-model').textContent.trim();
+      const input = document.createElement('input');
+      input.type = 'checkbox';
+      input.value = id;
+      input.setAttribute('aria-controls', card.id);
+      const name = document.createElement('span');
+      name.textContent = card.querySelector('.agent-name').textContent.trim();
+      label.append(input, name);
+      options.append(label);
+      input.addEventListener('change', () => {
+        if (input.checked) hidden.delete(id); else hidden.add(id);
+        update(true);
+      });
+      return {id, card, input, label};
+    });
+
+    function update(save = false) {
+      let count = 0;
+      for (const {id, card, input, label} of items) {
+        const visible = !hidden.has(id);
+        card.hidden = !visible;
+        input.checked = visible;
+        label.classList.toggle('selected', visible);
+        if (visible) count++;
+      }
+      grid.hidden = count === 0;
+      picker.querySelector('#model-card-status').textContent = `${count} of ${items.length} model cards shown`;
+      picker.querySelector('[data-model-cards="all"]').disabled = count === items.length;
+      picker.querySelector('[data-model-cards="none"]').disabled = count === 0;
+      if (save) {
+        try { localStorage.setItem(storageKey, JSON.stringify([...hidden])); } catch {}
+      }
+    }
+
+    picker.addEventListener('click', event => {
+      const button = event.target.closest('[data-model-cards]');
+      if (!button) return;
+      for (const {id} of items) {
+        if (button.dataset.modelCards === 'all') hidden.delete(id); else hidden.add(id);
+      }
+      update(true);
+    });
+    grid.before(picker);
+    update();
+  }
+
+  return {mount};
+})();

plus/app.js

@@ -161,6 +161,7 @@ function overview() {
   current={type:'overview'};
   $('#main').innerHTML=`<section class="hero"><div><div class="eyebrow"><span class="tiny-logo">✦</span> RLE-Bench · Embodied agent evaluation</div><h1>RoboTwin 2.0-Plus.<br><span>Plus evaluation.</span></h1><p>Eight configurations · four VLA checkpoints retain native instructions.<br>Pure Kinex evaluates three tasks per configuration with RLE revised instructions.</p></div><div class="hero-facts"><div><strong>${data.families.length}</strong><span>configurations</span></div><div><strong>${data.tasks.length}</strong><span>task/configuration pairs</span></div><div><strong>${data.variants.length}</strong><span>agent–model variants</span></div><span class="progress-label"><i></i>${data.benchmark_complete?'Evaluation complete':'Evaluation in progress'} · selected seeds</span></div></section>
   ${researchRerunNote()}${recordingPilotProgress()}${opusPilotProgress()}<div class="agent-cards">${data.variants.map(v=>{const s=stats(episodes(v.id));return `<a class="agent-card ${s.n?'':'planned'}" href="#runs/${v.id}" style="--variant:${colors[v.id]}"><div class="card-header"><span class="agent-name">${icon(v)}${esc(v.label||v.agent)}</span><span class="state-label">${s.n===plannedTasks(v.id).length?'Complete':s.n?'Partial':'Planned'}</span></div><p class="card-model">${modelLabel(v)}</p><div class="card-rate"><strong>${pct(s.rate)}</strong><span>native success</span></div><div class="card-stats"><span><b>${s.n?s.passes+' / '+s.n:'—'}</b> passed</span><span class="card-cost" title="${esc(costNote(s))}"><b>${costValue(s)}</b> total cost<small>Estimated USD</small></span></div><div class="completion-track"><span style="width:${s.n/plannedTasks(v.id).length*100}%"></span></div><div class="card-bottom"><span>${s.n} / ${plannedTasks(v.id).length} evaluated</span><span>${s.n?'Explore runs':'View planned'} ${arrow}</span></div></a>`;}).join('')}</div><div id="comparison-mount">${comparisonTable()}</div><a class="audit-launcher" href="#instructions"><div><strong>Instructions audit</strong><p>Compare current RLE goals with native descriptions, runtime language pools and recorded episode instructions.</p></div><span aria-hidden="true">↗</span></a>${taskBrowser()}${methodology()}`;
+  ModelCards.mount($('.agent-cards'), 'plus');
   renderRows();
 }
 function runsPage(variant,params,restoredFilters=null) {

plus/index.html

@@ -10,10 +10,11 @@
 <link rel="stylesheet" href="style.css?v=bd1a59147e1d">
 <script src="usage-metrics.js?v=330e92f8eb96" defer></script>
 <script src="../instruction-audit.js?v=7b5e9a418dec" defer></script>
-<script src="app.js?v=ca53816fe6c8" defer></script>
+<script src="../model-cards.js?v=7e115b1b03ae" defer></script>
+<script src="app.js?v=71a4927bc597" defer></script>
 <link rel="stylesheet" href="policy.css">
 <link rel="stylesheet" href="../instruction-audit.css?v=43163fc879ed">
-<link rel="stylesheet" href="../comparison-layout.css?v=aae6b25c444d">
+<link rel="stylesheet" href="../comparison-layout.css?v=359bdb6df354">
 </head>
 <body>
 <a class="skip" href="#main">Skip to content</a>