Jesse.Markowitz/interactive-story
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Order the Insights token bar by share, largest first

Browse Source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011BC7Dsg4gSQm3NLcZcG5SK
This commit is contained in:
Claude
2026-08-16 08:23:21 +00:00
parent 8df36f8d7e
commit 7ab2f2a38a
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Play.jsx
+6 -5
View File
@@ -1097,8 +1097,9 @@ function ScriptReport({ script }) {
const LEGEND_VISIBLE = 6 // enough to cover what actually moves the budget 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 // 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 // budget (so leftover width IS the remaining headroom) plus a matching legend.
// biggest-first, which is the order that answers "what is eating my context?". // 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 }) { function TokenBreakdown({ sections, tokens, used, onJump }) {
const [hovered, setHovered] = useState(null) const [hovered, setHovered] = useState(null)
const [expanded, setExpanded] = useState(false) 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. // prompt actually costs and the total line above it carries the warning.
const scale = Math.max(budget, used) const scale = Math.max(budget, used)
const free = Math.max(0, 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 })) .map((s, i) => ({ ...s, i, pct: (s.tokens / used) * 100 }))
.filter((s) => s.tokens > 0) .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 // 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. // actually move the budget and fold the long tail behind a count.
const shown = expanded ? ranked : ranked.slice(0, LEGEND_VISIBLE) const shown = expanded ? ranked : ranked.slice(0, LEGEND_VISIBLE)
@@ -1127,7 +1128,7 @@ function TokenBreakdown({ sections, tokens, used, onJump }) {
role="img" role="img"
aria-label={`Context breakdown: ${ranked.map(describe).join(', ')}`} aria-label={`Context breakdown: ${ranked.map(describe).join(', ')}`}
> >
{filled.map((s) => ( {ranked.map((s) => (
<div <div
key={s.i} key={s.i}
className={`token-seg ${hovered !== null && hovered !== s.i ? 'faded' : ''}`} className={`token-seg ${hovered !== null && hovered !== s.i ? 'faded' : ''}`}