arena: show $ spend on every model chip (card grid)

92a5f7dc5019d86135045e30db90eae3f15c2c64 · 2026-07-23 11:40:20 -0700 · Steve

Files touched

M public/index.html

Diff

commit 92a5f7dc5019d86135045e30db90eae3f15c2c64
Author: Steve <steve@designerwallcoverings.com>
Date:   Thu Jul 23 11:40:20 2026 -0700

    arena: show $ spend on every model chip (card grid)
---
 public/index.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 8212678..86d7e64 100644
--- a/public/index.html
+++ b/public/index.html
@@ -52,6 +52,8 @@ input[type=range]{accent-color:var(--neon);width:130px}
 .chip[data-build-model]:hover{border-color:var(--neon2);box-shadow:0 0 8px rgba(255,46,166,.3)}
 .chip[data-build-model]:hover .bx{opacity:1}
 .chip.launched{border-color:var(--ok);color:var(--ok)}
+.chip .cst{font-size:9px;opacity:.7;margin-left:1px}
+.chip .cst.paid{color:var(--gold);opacity:1;font-weight:700}
 @keyframes pulse{50%{opacity:.35}}
 .empty{color:var(--dim);padding:40px;text-align:center;border:1px dashed var(--line)}
 /* new challenge */
@@ -289,7 +291,8 @@ async function loadList(){
     const div = document.createElement('div'); div.className='card';
     const chips = c.runs.map(r=>{
       const win = c.winner===r.model ? ' winner' : '';
-      return `<span class="chip ${r.status}${win}" data-build-model="${r.model}" title="Build ${mLabel(r.model)}'s version in a real Claude/iTerm session">${mLabel(r.model)}${c.winner===r.model?' 👑':''}${r.status==='error'?' ✗':''} <b class="bx">⚒</b></span>`;
+      const cost = r.cost ? '$'+r.cost.toFixed(3) : '$0';
+      return `<span class="chip ${r.status}${win}" data-build-model="${r.model}" title="Build ${mLabel(r.model)}'s version in a real Claude/iTerm session — spend ${cost}">${mLabel(r.model)}${c.winner===r.model?' 👑':''}${r.status==='error'?' ✗':''} <span class="cst${r.cost?' paid':''}">${cost}</span> <b class="bx">⚒</b></span>`;
     }).join('');
     const shots = c.runs.filter(r=>r.status==='done'&&r.thumb).slice(0,4);
     const shotsHtml = shots.length

← 6c375f2 Pin the Claude arena competitor to Opus (CLAUDE_MODEL, defau · back to Model Arena · auto-save: 2026-07-23T11:50:46 (15 files) — data/challenges. d6dfe90 →