Skip to content

Commit 29d4c1f

Browse files
S1M0N38S1M0N38
committed
feat: move states into the header of the gamestate view
1 parent 1369ec8 commit 29d4c1f

2 files changed

Lines changed: 19 additions & 119 deletions

File tree

‎icons.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎script.js‎

Lines changed: 17 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1129,10 +1129,6 @@ function openRunViewer({
11291129
<pre id="run-reasoning" class="flex-1 min-h-0 bg-zinc-50 dark:bg-zinc-900 rounded-md p-3 text-xs text-zinc-800 dark:text-zinc-200 font-mono italic whitespace-pre-wrap overflow-auto"></pre>
11301130
<div id="run-tool-call" class="flex-shrink-0 bg-zinc-50 dark:bg-zinc-900 rounded-md px-3 py-2 text-xs font-mono text-zinc-800 dark:text-zinc-200 overflow-x-auto whitespace-nowrap text-center"></div>
11311131
</div>
1132-
<!-- Stats Column (narrower) -->
1133-
<div class="flex flex-col" style="flex: 0 0 200px;">
1134-
<div id="run-stats" class="p-3 text-xs text-zinc-800 dark:text-zinc-200 overflow-auto"></div>
1135-
</div>
11361132
</div>
11371133
</div>
11381134
</div>`;
@@ -1233,12 +1229,28 @@ async function loadAndRenderRequest(state) {
12331229
const runNumber = state.runs && state.runs.length > 0 ? state.runIndex + 1 : null;
12341230
const totalRuns = state.runs ? state.runs.length : null;
12351231

1232+
// Tokens icon from icons.svg
1233+
const tokensIcon =
1234+
`<svg class="w-3 h-3 inline-block"><use href="icons.svg#icon-tokens"></use></svg>`;
1235+
12361236
let title = `${vendor}/${model} • ${seed}`;
12371237
if (runNumber !== null && totalRuns !== null) {
12381238
title += ` • Run ${runNumber}/${totalRuns}`;
12391239
}
12401240
title += ` • Request ${index}/${totalRequests}`;
1241-
overlay.querySelector('#run-title').textContent = title;
1241+
1242+
// Add tokens and cost if metadata exists
1243+
if (metadata && metadata.tokens && metadata.cost) {
1244+
const promptTokens = metadata.tokens.prompt || 0;
1245+
const completionTokens = metadata.tokens.completion || 0;
1246+
const promptCost = metadata.cost.prompt_usd || 0;
1247+
const completionCost = metadata.cost.completion_usd || 0;
1248+
1249+
title += ` • ${tokensIcon} in/out ${promptTokens}/${completionTokens}`;
1250+
title += ` • $ in/out ${promptCost.toFixed(4)}/${completionCost.toFixed(4)}`;
1251+
}
1252+
1253+
overlay.querySelector('#run-title').innerHTML = title;
12421254

12431255
const imgEl = overlay.querySelector('#run-screenshot');
12441256
// Try formats in order: webp -> png -> avif
@@ -1306,118 +1318,6 @@ async function loadAndRenderRequest(state) {
13061318
toolCallDiv.textContent = `${name}(${argsString})`;
13071319
}
13081320

1309-
// Render stats from metadata.json
1310-
const statsDiv = overlay.querySelector('#run-stats');
1311-
if (metadata) {
1312-
// Database icon SVG
1313-
const databaseIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3">
1314-
<path d="M8 7c3.314 0 6-1.343 6-3s-2.686-3-6-3-6 1.343-6 3 2.686 3 6 3Z" />
1315-
<path d="M8 8.5c1.84 0 3.579-.37 4.914-1.037A6.33 6.33 0 0 0 14 6.78V8c0 1.657-2.686 3-6 3S2 9.657 2 8V6.78c.346.273.72.5 1.087.683C4.42 8.131 6.16 8.5 8 8.5Z" />
1316-
<path d="M8 12.5c1.84 0 3.579-.37 4.914-1.037.366-.183.74-.41 1.086-.684V12c0 1.657-2.686 3-6 3s-6-1.343-6-3v-1.22c.346.273.72.5 1.087.683C4.42 12.131 6.16 12.5 8 12.5Z" />
1317-
</svg>`;
1318-
1319-
// Dollar icon SVG
1320-
const dollarIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3">
1321-
<path d="M6.375 5.5h.875v1.75h-.875a.875.875 0 1 1 0-1.75ZM8.75 10.5V8.75h.875a.875.875 0 0 1 0 1.75H8.75Z" />
1322-
<path fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM7.25 3.75a.75.75 0 0 1 1.5 0V4h2.5a.75.75 0 0 1 0 1.5h-2.5v1.75h.875a2.375 2.375 0 1 1 0 4.75H8.75v.25a.75.75 0 0 1-1.5 0V12h-2.5a.75.75 0 0 1 0-1.5h2.5V8.75h-.875a2.375 2.375 0 1 1 0-4.75h.875v-.25Z" clip-rule="evenodd" />
1323-
</svg>`;
1324-
1325-
let statsHtml = '<div>';
1326-
statsHtml += '<table class="w-full"><tbody>';
1327-
1328-
// Tokens
1329-
statsHtml += `<tr>
1330-
<td class="py-1">
1331-
<div class="flex items-center justify-left space-x-1 text-zinc-700 dark:text-zinc-300">
1332-
${databaseIcon}
1333-
<span>prompt</span>
1334-
</div>
1335-
</td>
1336-
<td class="text-right py-1">
1337-
<span class="text-xs font-mono text-zinc-700 dark:text-zinc-300">${(metadata.tokens.prompt / 1000).toFixed(1)} K</span>
1338-
</td>
1339-
</tr>`;
1340-
1341-
statsHtml += `<tr>
1342-
<td class="py-1">
1343-
<div class="flex items-center justify-left space-x-1 text-zinc-700 dark:text-zinc-300">
1344-
${databaseIcon}
1345-
<span>completion</span>
1346-
</div>
1347-
</td>
1348-
<td class="text-right py-1">
1349-
<span class="text-xs font-mono text-zinc-700 dark:text-zinc-300">${(metadata.tokens.completion / 1000).toFixed(1)} K</span>
1350-
</td>
1351-
</tr>`;
1352-
1353-
statsHtml += `<tr>
1354-
<td class="py-1">
1355-
<div class="flex items-center justify-left space-x-1 text-zinc-700 dark:text-zinc-300">
1356-
${databaseIcon}
1357-
<span>reasoning</span>
1358-
</div>
1359-
</td>
1360-
<td class="text-right py-1">
1361-
<span class="text-xs font-mono text-zinc-700 dark:text-zinc-300">${(metadata.tokens.reasoning / 1000).toFixed(1)} K</span>
1362-
</td>
1363-
</tr>`;
1364-
1365-
statsHtml += `<tr>
1366-
<td class="py-1">
1367-
<div class="flex items-center justify-left space-x-1 text-zinc-700 dark:text-zinc-300">
1368-
${databaseIcon}
1369-
<span>total</span>
1370-
</div>
1371-
</td>
1372-
<td class="text-right py-1">
1373-
<span class="text-xs font-mono text-zinc-700 dark:text-zinc-300 font-semibold">${(metadata.tokens.total / 1000).toFixed(1)} K</span>
1374-
</td>
1375-
</tr>`;
1376-
1377-
// Add vertical space between tokens and cost
1378-
statsHtml += `<tr><td colspan="2" class="py-2"></td></tr>`;
1379-
1380-
// Cost
1381-
statsHtml += `<tr>
1382-
<td class="py-1">
1383-
<div class="flex items-center justify-left space-x-1 text-zinc-700 dark:text-zinc-300">
1384-
${dollarIcon}
1385-
<span>prompt</span>
1386-
</div>
1387-
</td>
1388-
<td class="text-right py-1">
1389-
<span class="text-xs font-mono text-zinc-700 dark:text-zinc-300">$${metadata.cost.prompt_usd.toFixed(4)}</span>
1390-
</td>
1391-
</tr>`;
1392-
1393-
statsHtml += `<tr>
1394-
<td class="py-1">
1395-
<div class="flex items-center justify-left space-x-1 text-zinc-700 dark:text-zinc-300">
1396-
${dollarIcon}
1397-
<span>completion</span>
1398-
</div>
1399-
</td>
1400-
<td class="text-right py-1">
1401-
<span class="text-xs font-mono text-zinc-700 dark:text-zinc-300">$${metadata.cost.completion_usd.toFixed(4)}</span>
1402-
</td>
1403-
</tr>`;
1404-
1405-
statsHtml += `<tr>
1406-
<td class="py-1">
1407-
<div class="flex items-center justify-left space-x-1 text-zinc-700 dark:text-zinc-300">
1408-
${dollarIcon}
1409-
<span>total</span>
1410-
</div>
1411-
</td>
1412-
<td class="text-right py-1">
1413-
<span class="text-xs font-mono text-zinc-700 dark:text-zinc-300 font-semibold">$${metadata.cost.total_usd.toFixed(4)}</span>
1414-
</td>
1415-
</tr>`;
1416-
1417-
statsHtml += '</tbody></table>';
1418-
statsHtml += '</div>';
1419-
statsDiv.innerHTML = statsHtml;
1420-
}
14211321
}
14221322

14231323
async function navigateRun(state, delta) {

0 commit comments

Comments
 (0)
⚡