[SharoonRafeek]

Problem

While dictating in the chat composer, the live transcription box under the editor stops following the text. It is capped at max-h-32 with overflow-y-auto, but nothing keeps it scrolled to the end, so once a long dictation overflows the box, new words land below the visible area and you can't see what is being transcribed as you speak.

Steps: start voice input in the composer (desktop or web) and keep talking until the transcript is taller than the box. The box stays on the first lines while the scrollbar grows.

Change

The box is now a reversed flex column (flex flex-col-reverse) with the committed and tentative spans wrapped in one inner div. With column-reverse, the browser anchors the scroll position at the bottom, so the newest words stay in view as text arrives. No JS runs per update, and if you scroll up to reread, the box keeps your position instead of jumping back down. The inner div keeps the text in normal reading order.

Only the composer's box is affected. The other live previews (Settings > Voice microphone test, text-field dictation) have no max height, so they grow instead of scrolling.

Scope and approval

I believe this qualifies as a very small, focused fix for an obvious bug: the box is meant to show the live transcript, and it hides the newest part of it. It changes one element's layout in ChatComposer.tsx and no behavior beyond scrolling.

Before opening this, I searched open and closed issues and PRs for transcript, dictation, live transcription, voice input, and scroll, and found no report or fix for it. Related work I checked:

• feat(web): style dictation with the redesign primitives #28844 restyles this same box (surface-well) as part of the redesign stack. It doesn't change scrolling, but the two will touch the same lines.
• fix(voice): dictation survives draft changes and Escape in the citation box #32682 changes how the transcript commits when the draft changes. It doesn't touch this box's layout.

Verification

• Reproduced in the T3 Code Nightly desktop app on macOS: a long dictation overflowed the box and new words were hidden below it.
• In a local web dev client on this branch, I rendered the box with the old and new classes in the real composer and grew it to 14 sentences. Old: scrollTop stayed at 0 (first lines visible). New: stayed pinned to the last line. A one-sentence transcript still renders as a short box (39px). After scrolling up 60px, appending more text left the position at -60, so rereading isn't interrupted.
• Dictated a long message with a real microphone in the web dev client on this branch: the box followed the newest words as I spoke.
• vp run check:changed passes (format, lint, knip, typecheck, react compiler).

Not checked: mobile (it has no equivalent box), and Safari/Firefox (the desktop app is Chromium; column-reverse scroll anchoring is supported in current versions of both).

Before	After

Opus 5.5, Claude Code

[macroscopeapp]

Approvability

Verdict: Approved at 64594cb

Macroscope's review found this PR approvable — The change keeps recent dictation words visible while retaining normal text order. Its effects are confined to the transcript preview’s layout and scrolling, with no changes to transcription or message handling.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review.

Walkthrough

The live transcription preview now uses a reverse-column scroll container. Committed and tentative text appear together inside a normal-order inner element. The preview’s label, styling, and maximum height remain unchanged.

Changes: Live transcription preview

Layer / File(s)	Summary
Arrange transcription preview text apps/web/src/components/chat/ChatComposer.tsx	The scroll container uses reverse column order. The committed and tentative transcription spans are wrapped together in an inner element.

Estimated code review effort: 2 (Simple) | ~5 minutes

Change: Bug fix

Suggested reviewers: juliusmarminge, t3dotgg

Merge Risk: Minimal · up to a50c6

This changes only how the live dictation preview scrolls so the newest words stay visible. No actionable merge risk remains, and the change is easy to revert.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title names the change: a fix in the web app so the live dictation transcript keeps the newest words visible. It matches the raw summary, which describes a flex-col-reverse container that pins scr…
Description check		The description follows the template. It has Problem, Change, Scope, and Verification sections. The Problem section gives the bug and reproduction steps. The Change section explains the reversed flex …
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Title check

Explanation

The title names the change: a fix in the web app so the live dictation transcript keeps the newest words visible. It matches the raw summary, which describes a flex-col-reverse container that pins scroll to the bottom. It follows the conventional commit form and is specific enough for a teammate scanning history.

Full details: Description check

Explanation

The description follows the template. It has Problem, Change, Scope, and Verification sections. The Problem section gives the bug and reproduction steps. The Change section explains the reversed flex column and why it keeps the newest words in view. The Scope section explains why the change is a small bug fix and links related PRs. The Verification section lists specific checks with observed results, names what was not checked, and includes before/after images. It ends with the model and harness, as the template asks. The Scope section does not link a tracked issue. It argues that none is needed, which the template allows for small obvious fixes. The PR objectives also mention a maintainer-verified run, but the description does not need to cover that.

Finishing Touches

Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Recent review info

Run configuration

• Source mode: Auto
• Repository: pingdotgg/t3code
• Branch: main
• File: .coderabbit.config.ts
• Commit: 9f815c9
• Layers: Repository TS config
• Review profile: CHILL
• Plan: Advanced
• Run ID: 0d9f79ed-6277-4d05-8234-2d49df797ce9

Commits

Reviewing files that changed from the base of the PR and between 64594cb and a50c669.

Files selected for processing: 1

• apps/web/src/components/chat/ChatComposer.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

[maria-rcks]

Note

Written by gpt-6.1-sol on behalf of Maria

Verified in a real dev environment

verified unchanged head 64594cbfff3a6e7203777b8754a5d9d406ed83e8 in linux chrome, driven with the repo’s playwright dependency and /usr/bin/google-chrome.

• reproduced on github/main (2922e8fb59) in a separate worktree after vp i and a background vp run dev. the live preview stayed at scrollTop=0 with clientHeight=126 and scrollHeight=198, hiding new words.
• stopped main before starting the exact pr head, ran vp i, then a background vp run dev with isolated state. created a project pointing to a real git checkout through the app. used the same spoken passage and 1280×900 viewport on both revisions.
• exercised actual browser microphone capture through a pulseaudio input, speech websocket, and the local parakeet unified english model. the spoken input was synthesized audio played through pulseaudio, not an injected transcript or mocked speech service.
• the pr followed new words as the preview overflowed. scrolling upward held the earlier passage while more lines arrived; scrolling downward returned to the newest words.
• finishing committed the complete transcript to the draft. submitted it through the client using codex gpt-6.1-sol; the real provider replied dictation received. on both revisions.
• a short second dictation used a 39 px preview. canceling removed it and preserved the existing typed draft.

existing ci checks are green. no source edits or pushes were needed; no new automated checks were run.

before, on main:

after, on the pr, with the same spoken passage:

18-second sampled recording, about one captured frame per second, showing the live preview following incoming text:

Not verified

native electron, ios/android, safari/firefox, physical microphone hardware, other speech models, cloud transcription, and remote/relay connections were not exercised on this linux vm. mobile has no equivalent changed preview. no cross-platform or performance claim is made.

[SharoonRafeek]

Hey @maria-rcks, if possible could you get this merged? I need to see what I'm saying while I dictate. Sorry for bugging you

[juliusmarminge]

Evidence

Scenario: Live dictation keeps the newest words visible

Chromium 156, 1280×800, light theme; fresh databases on both commits. Settings > Voice: select local transcription and download Parakeet Unified English 0.6B. Open the seeded thread, start voice input, and play identical continuous speech. Capture when the final sentence is transcribed, scroll upward, and continue dictating until over 120 more characters arrive.

Proven: the scenario fails on base 9f815c94af and passes on head a50c6690e8.

	Before: 9f815c94af	After: a50c6690e8
Result	Failed: newest words invisible; rereading respected	Passed: newest words visible; rereading respected
Newest words
Rereading start
More words arrive while rereading
Failure capture
Recording	Before recording	After recording

Scenario source · Speech recording · Speech text · Sanitized proof run log