From 7ab2f2a38a0ec561534ee2fd4a7827e34004238e Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 16 Aug 2026 08:23:21 +0000 Subject: [PATCH] Order the Insights token bar by share, largest first MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The bar ran in prompt order while the legend below it ranked by share, so reading one against the other meant matching colours back and forth. Sort the segments the same way the legend already sorts, so the widest slice is always the leftmost and the two read as one list. The sections further down the panel keep prompt order — that is the order the model sees. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_011BC7Dsg4gSQm3NLcZcG5SK --- frontend/src/pages/Play.jsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/Play.jsx b/frontend/src/pages/Play.jsx index 6a2e852..ddc3305 100644 --- a/frontend/src/pages/Play.jsx +++ b/frontend/src/pages/Play.jsx @@ -1097,8 +1097,9 @@ function ScriptReport({ script }) { const LEGEND_VISIBLE = 6 // enough to cover what actually moves the budget // Where the prompt's tokens actually went: one stacked bar scaled to the -// budget (so leftover width IS the remaining headroom) plus a legend ordered -// biggest-first, which is the order that answers "what is eating my context?". +// budget (so leftover width IS the remaining headroom) plus a matching legend. +// Bar and legend both run biggest-share-first — the order that answers "what is +// eating my context?" — rather than the prompt order the sections below use. function TokenBreakdown({ sections, tokens, used, onJump }) { const [hovered, setHovered] = useState(null) const [expanded, setExpanded] = useState(false) @@ -1108,10 +1109,10 @@ function TokenBreakdown({ sections, tokens, used, onJump }) { // prompt actually costs and the total line above it carries the warning. const scale = Math.max(budget, used) const free = Math.max(0, budget - used) - const filled = sections + const ranked = sections .map((s, i) => ({ ...s, i, pct: (s.tokens / used) * 100 })) .filter((s) => s.tokens > 0) - const ranked = [...filled].sort((a, b) => b.tokens - a.tokens) + .sort((a, b) => b.tokens - a.tokens) // The panel is narrow, so the legend is one column: list the sections that // actually move the budget and fold the long tail behind a count. const shown = expanded ? ranked : ranked.slice(0, LEGEND_VISIBLE) @@ -1127,7 +1128,7 @@ function TokenBreakdown({ sections, tokens, used, onJump }) { role="img" aria-label={`Context breakdown: ${ranked.map(describe).join(', ')}`} > - {filled.map((s) => ( + {ranked.map((s) => (