Skip to content

fix(ui-web): read a finished turn's trail at the answer's own size - #742

Merged
0xKT merged 1 commit into
mainfrom
fix/transcript_fold_type_size
Sep 23, 2026
Merged

0xKT merged 1 commit into
mainfrom
fix/transcript_fold_type_size

Conversation

@arelchan

Copy link
Copy Markdown
Contributor

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:

  • The four line kinds (.think, .tfh, .wrow.sum, and .wrow) stay declared
    together. 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.
  • The two comments that named the old numbers are rewritten. A comment still saying
    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

  • Fix
  • Feature
  • Docs
  • CI / tooling
  • Refactor
  • Other

Verification

One file changed, ui-web/src/styles/page.css, +22 -18. Run on the branch, based on
5c4ae70b6:

npm test --prefix ui-web        208 files, 2890 tests passed
npm run lint --prefix ui-web    0 errors, 4 pre-existing warnings
npm run type-check --prefix ui-web   passed
npm run gen:check --prefix ui-web    generated.ts matches the contract (202 methods)
make check-large-files          passed
scripts/check_source_language.py github/main..HEAD   no findings
npx commitlint --from github/main --to HEAD          passed

Measured in a real browser rather than read off the stylesheet: the page was built,
served on a live gateway, and getComputedStyle read back on an actual finished
turn with its fold open and its rows expanded.

before after answer body
.tfh (done) 11px / 15px 14px / 22px 14px
.wrow (call row) 11px / 15px 14px / 22px 14px
.wrow.sum (summary) 11px / 15px 14px / 22px 14px
.think (thought) 11px / 15px 14px / 22px 14px
  • Relevant tests pass locally
  • 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. 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-language hardcodes
origin/main..HEAD, and in a checkout whose origin is the GitLab mirror that
range covers a few hundred upstream commits and fails on their fixtures. Run the
script with github/main..HEAD to 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.

  • Security impact considered
  • Backward compatibility considered
  • Rollback path is clear for risky changes

Related Issues

N/A

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 gloryfromca left a comment •

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 passed
  • npm run lint: passed with 4 pre-existing warnings and 0 errors
  • npm run type-check: passed
  • npm run gen:check: passed (202 methods)
  • npm run build: passed
  • python3 build.py: passed; both boot snapshots matched
  • git diff --check github/main...HEAD: passed

@0xKT
0xKT merged commit 7bfda14 into main Sep 23, 2026
22 of 23 checks passed
@0xKT
0xKT deleted the fix/transcript_fold_type_size branch September 23, 2026 13:27
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants