A thinking block that says how long and how much

Each block reports its own round now. `reasoning_ms` was the reply's first
burst, written once, so on the fifteen-block reply GPT-OSS actually produces
only the first could claim a duration and the other fourteen said "Thought" and
nothing at all. `Generation.thinking_ms` accumulates per round and `close_step`
stamps it cumulatively, so steps.py diffs it exactly as it already diffs the
three lengths beside it.

The interval between a round's first and last reasoning delta, deliberately, not
a sum of gaps between deltas -- that would count the network's latency as the
model's thinking.

While it runs: "Thinking" with an ellipsis that types itself, and the seconds
and tokens climbing beside it. The ellipsis is a `content` keyframe, so there is
no timer to start, stop or clean up when the block is swapped away -- it stops
existing when the element does. The numbers come from a `think` frame, and
`round_thinking_ms` is written by the producer rather than computed by the
follower from a start time: a model that has stopped thinking and moved on to a
tool should show a settled number, not a clock that keeps running.

Tokens read exactly up to 200 and as `0.4k` above it, from one helper shared by
the live label and the stored one, so the two cannot drift into two conventions.
The live duration is terser than the finished one -- `6s` against `6 seconds` --
because it sits beside an animating word and changes every second, where "less
than a second" flickering into "1 second" reads as a glitch.

Checked against the real endpoint: fourteen marks carrying 919ms through
14223ms, per-block labels from "less than a second · 111" to "4 seconds · 0.5k",
and the live frames resetting each round rather than accumulating.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jaroslav Beneš
2026-08-04 21:03:25 +02:00
parent 74dd19588b
commit 30ddcba787
9 changed files with 385 additions and 10 deletions
+30
View File
@@ -181,6 +181,36 @@
.reasoning__summary::-webkit-details-marker { display: none; }
.reasoning__summary:hover { color: var(--ink); background: var(--surface-hover); }
/* "Thinking" with an ellipsis that types itself: `.` `..` `...`, on a step
timer so it lands on whole dots rather than sliding. Animating `content` is
the only way to do this without a JavaScript timer to start, stop and clean
up when the block is swapped away -- and this one simply stops existing when
the element does.
`min-width` on the pseudo-element so the label does not jog left and right as
the dots come and go; `ch` because it is exactly three dot-widths. */
.reasoning__working::after {
content: "...";
display: inline-block;
min-width: 1.6ch;
text-align: left;
animation: thinking-dots 1.5s steps(1) infinite;
}
@keyframes thinking-dots {
0% { content: "."; }
33% { content: ".."; }
66% { content: "..."; }
}
/* The seconds and the token count. Tabular figures so a climbing number does
not shift the text beside it on every tick. Empty until the first frame
arrives, and `:empty` keeps its separator from showing before that. */
.reasoning__stats {
color: var(--ink-faint);
font-variant-numeric: tabular-nums;
}
.reasoning__stats:not(:empty)::before { content: " · "; }
/* --- Compacted turns -------------------------------------------------------
Summarised messages, kept and readable but out of the way. Collapsed by
default: the point of compacting was that they stopped mattering.