fix(cards): pad streaming/reasoning preview to constant row count#146
Closed
fix(cards): pad streaming/reasoning preview to constant row count#146
Conversation
User reported up-down screen jitter when a plan card is mid-execution and a streaming card is rendering above (or below) it. Tracing through CardStream.tsx: an active plan card with non-done steps is treated as "unsettled" and pulls every later card into the live region, where they redraw on every chunk. The actual jitter source is StreamingCard's preview region: it slices the last STREAMING_PREVIEW_LINES of streamed content, which means the rendered height grows from 1 row → 4 rows during the first wave of output, and similarly for ReasoningCard's StreamingPreview. Each chunk that lands during that ramp changes the live region's total height by one row — Ink moves the cursor differently between erase + reprint, the user sees neighbouring cards (PlanCard included) shift up and down. Pad both previews to STREAMING_PREVIEW_LINES with empty 1-row Boxes, so the rendered height stays constant at header + 4 = 5 rows for the whole streaming lifetime. CardBox's borderLeft continues to render the accent bar through pad rows. No effect on the done-state branch which keeps a variable-height full Markdown render — that goes to Static and never redraws.
Owner
Author
|
Superseded — the actual cause of the up-down jitter the user reported was the right-side sidebar panel showing during plan-approval (queued-only steps), not the streaming card height ramp. Fix coming in a separate PR. |
3 tasks
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
1 participant
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
Fixes the up-down screen jitter the user reported when a plan card is mid-execution and a streaming card renders alongside it.
Root cause
CardStream.tsx:9-23definesisSettled:cutoff = i; breakinCardStream.tsx:28-34) — once a card is live, every card after it is live tooSo during plan execution, the streaming card lives in the redraw region. Each stream chunk forces Ink to erase + reprint the entire live region.
That alone wouldn't jitter if the live region's total height were constant. But it isn't:
StreamingCard.tsx:39—visible = visualLines.slice(-STREAMING_PREVIEW_LINES)— during the first wave of output,visible.lengthgoes 1 → 2 → 3 → 4 across chunksheader(1) + visible.length→ 2 → 3 → 4 → 5 rows as the stream rampsReasoningCard.tsx:103-107StreamingPreviewhas the same ramp shapeEach chunk during the ramp shifts every card above (PlanCard included) by 1 row → visible jitter.
Fix
Pad the preview region to
STREAMING_PREVIEW_LINES(4) so the rendered height is constant 5 rows for the whole streaming lifetime. Empty 1-row<Box height={1} />(consistent with the existing spacer pattern atReasoningCard.tsx:39).CardBox'sborderLeftkeeps drawing the▎accent across pad rows.Done state is untouched — that branch returns full
<Markdown>body, ends up in Static, never redraws.Test plan
npm run verify— 1829/1829 tests passRelated