Repository navigation
fix(ui-web): read a finished turn's trail at the answer's own size - #742
Merged
Merged
Conversation
The fold that stands in for finished work, and every line inside it, was set at 11px against the answer's 14px. A reader who opens that fold is reading the trail, not glancing past it, so type three sizes below the copy it sits in made them lean in for the one thing they had asked to see. The head, the rows, the stretch summary and the thought line all move to 14px on a 22px line, and the parts that ride on a row -- the index, the clock, the diff counts, the glyph -- move with them so a row stays one piece. The badge pill goes to 12px: a pill is a notch below its row, not level with it. The four line kinds stay declared together, which is what keeps them from drifting apart again. The two comments that named the old numbers are rewritten, since a comment left at 11px would misdescribe the rule immediately under it. Co-authored-by: Claude (claude-opus-5) <noreply@anthropic.com> Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
gloryfromca
reviewed
Sep 23, 2026
Member
There was a problem hiding this comment.
No blockers; this can merge as far as I am concerned.
Reviewed the complete github/main...HEAD diff and the transcript components/selectors that consume these rules. The sizing change remains internally consistent across fold headers, thought/status lines, work summaries, individual rows, clocks, counts, badges, and both icon systems, while preserving the existing fit-content, max-width, and ellipsis behavior.
I also covered the repository rules and Web UI context, relevant history, callers, backward compatibility, architecture boundaries, and whether tests were weakened (none were changed in this PR).
Verification:
npm test: 208 files passed, 2,890 tests passednpm run lint: passed with 4 pre-existing warnings and 0 errorsnpm run type-check: passednpm run gen:check: passed (202 methods)npm run build: passedpython3 build.py: passed; both boot snapshots matchedgit diff --check github/main...HEAD: passed
0xKT
approved these changes
Sep 23, 2026
6 of 12 tasks
gloryfromca
pushed a commit
that referenced
this pull request
Sep 23, 2026
…reads (#756) ## Summary What the agent says on the way through a turn -- the sentence between one call and the next -- sat at 12px. That was the middle rung of a ladder: the process trail at 11px, narration at 12px, the reply at 14px, each a step apart, and the rule's own comment described it that way. #742 raised the trail to the reply's size, which took the ladder away. The middle rung was left as the smallest type in the card, with a larger tool row directly above and below it, so a sentence the agent actually said read smaller than the calls around it. That is the wrong way round: the calls are a trail, the sentence is speech. Narration takes the reply's own size and measure now. The two overrides are dropped rather than restated, so the size comes from the card and the line from `.prose`: narration and answer are the same type to the pixel, and stay that way if either moves. The quieter grey stays, because what separates narration from the answer is colour, not size. ## Type - [x] Fix - [ ] Feature - [ ] Docs - [ ] CI / tooling - [ ] Refactor - [ ] Other ## Verification One file, `ui-web/src/styles/page.css`, +8 -4. Run on the branch, based on `5b0d00482`: ``` npm test --prefix ui-web 209 files, 2940 tests passed npm run lint --prefix ui-web 0 errors, 4 pre-existing warnings npm run type-check --prefix ui-web passed npx commitlint --from github/main --to HEAD passed ``` Measured in a browser rather than read off the stylesheet: the page was built, served on a live gateway, and `getComputedStyle` read back on a real turn with its fold open, on a conversation that interleaves narration with tool rows and a sub-agent dispatch. | line | before | after | |---|---|---| | fold head | 14px / 22px | 14px / 22px | | tool row | 14px / 22px | 14px / 22px | | mid-turn narration | 12px / 20.4px | 14px / 25.2px | | answer prose | 14px / 25.2px | 14px / 25.2px | Narration now matches the answer exactly, line box included, because it reads both values off the same declarations the answer does. - [x] Relevant tests pass locally - [x] Relevant lint / type checks pass locally - [ ] User-facing docs or screenshots are updated when needed The last box is unchecked because no checked-in screenshot shows this surface, and this repo does not take image assets. Before and after were captured locally to compare the two. ## Risk Presentation only: no markup, no state, no behaviour. A turn that narrates between calls is taller than it was. Rollback is the single file: revert this commit. - [x] Security impact considered - [x] Backward compatibility considered - [x] Rollback path is clear for risky changes ## Related Issues Follows #742, which raised the process trail and left this line behind. Co-authored-by: arelchan <204152633+arelchan@users.noreply.github.com> Co-authored-by: Claude (claude-opus-5) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The fold that stands in for a finished turn -- "done", and every line inside it --
was set at 11px while the answer it sits with is 14px. Someone who opens that fold
is reading the trail, not glancing past it, so type three sizes below the copy
around it made them lean in for the one thing they had asked to see.
The head, the call rows, the stretch summary and the thought line all move to 14px
on a 22px line. The parts that ride on a row move with them -- the index, the clock,
the diff counts, the glyph -- so a row stays one piece rather than a large label
with small furniture beside it. The badge pill goes to 12px instead: a pill reads as
a notch below its row, not level with it.
Two decisions worth a reviewer's eye:
.think,.tfh,.wrow.sum, and.wrow) stay declaredtogether. feat(ui-web): bring the chat view to the Figma design #710 put them in one rule on purpose, after they had drifted to 13 and
13.5px in two different greys and read as three kinds of thing. Raising only the
fold head would have recreated exactly that drift, so the whole kind moves at once.
11px would misdescribe the rule directly under it, which is how the previous drift
went unnoticed.
This reverses the sizing part of #710 for these four line kinds only. The greys, the
spacing, the glyph treatment and everything else that PR brought to the Figma design
are untouched.
Type
Verification
One file changed,
ui-web/src/styles/page.css, +22 -18. Run on the branch, based on5c4ae70b6:Measured in a real browser rather than read off the stylesheet: the page was built,
served on a live gateway, and
getComputedStyleread back on an actual finishedturn with its fold open and its rows expanded.
.tfh(done).wrow(call row).wrow.sum(summary).think(thought)The last box is unchecked because no checked-in screenshot shows this surface. The
before and after were captured locally to compare the two, and are not committed --
this repo does not take image assets.
Note for anyone re-running the gates:
make check-source-languagehardcodesorigin/main..HEAD, and in a checkout whoseoriginis the GitLab mirror thatrange covers a few hundred upstream commits and fails on their fixtures. Run the
script with
github/main..HEADto lint this branch alone.Risk
Presentation only: no markup, no state, no behaviour. A finished turn's trail
occupies more vertical space than it did, which is the point of the change and the
one thing to look at.
Rollback is the single file: revert this commit.
Related Issues
N/A