fix(web): stop composer banner glass overlap

[t3-code]

summary

• restore the shared 17px attachment mask so banner fill never stacks under the translucent composer
• fade virtualized timeline content to fully transparent before the measured composer overlay begins, keeping conversation text out from behind attached banners and the composer
• preserve the shared eased topbar profile in the combined list mask, keep the scrollbar lane opaque, leave minimap chrome outside the mask, and clamp the bottom fade to at most 60% of timeline height
• preserve the user's Glass opacity setting across the banner, stack cap, drawers, and composer
• remove the stale before:mask-none assertion from fix(web): keep server update banners flush with the composer #8000

this keeps #8000's intended content occlusion without its overlap regression or a hardcoded opaque banner.

verification

• vp test run --project unit src/components/chat/ComposerBannerStack.test.tsx src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• vp fmt --check apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• web typecheck
• real web renderer at 1351x522, T3 Chat dark theme at 40% glass opacity
• masked glass without timeline fade: synthetic background text changed 22,090 visible banner pixels
• unmasked glass: banner/text affected 7,578 overlap pixels and 11,883 composer pixels
• final timeline fade: background text changed 0 pixels while banner opacity remained 40%; both standard and WebKit banner masks remained the shared 17px attachment mask
• verified the combined list mask reproduces the original responsive 48px top profile at 4.8/11.52/20.16/29.76/39.36/48px, retains the virtualized fade's separate opaque scrollbar layer, and leaves the parent viewport unmasked
• verified a simulated stale 9,999px overlay measurement resolves through min(9999px, 60%) instead of hiding the full timeline

visual proof uses the real app and production composer/banner/timeline components with a synthetic in-flight update item and synthetic background conversation text.

original text show-through

overlap regression

after

request provenance

• requested by: @extoci

---

Note

Low Risk
Visual masking and CSS class selection only; no changes to message data, auth, or composer logic beyond scroll-fade presentation.

Overview
Fixes conversation text showing through translucent composer banners by masking the virtualized timeline where the measured composer stack sits, instead of relying only on the topbar fade.

MessagesTimeline now sets --timeline-composer-overlay-height on the viewport from contentInsetEndAdjustment, clamped with min(..., 60%) so bad measurements cannot wipe the whole list. When that inset is positive, the LegendList uses virtualized-scroll-fade plus either timeline-scroll-bottom-fade or timeline-scroll-combined-fade (when topFadeEnabled), and keeps topbar-scroll-fade only when there is no composer overlay.

index.css adds those timeline utilities: they define --virtualized-scroll-fade-mask with a bottom gradient that fades to transparent at the overlay height (and the combined variant preserves the existing eased top profile, including the sm breakpoint).

^{Reviewed by Cursor Bugbot for commit 9cb5e8d. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix composer banner overlap in MessagesTimeline scroll fades

• Sets the --timeline-composer-overlay-height CSS variable on the timeline viewport when contentInsetEndAdjustment is non-zero.
• Adds timeline-scroll-bottom-fade and timeline-scroll-combined-fade utility classes to apply gradient masks that respect the composer height.
• Switches LegendList to use the new fade classes when a bottom inset exists, preserving topbar-scroll-fade only when the inset is zero.
• Behavioral Change: Scroll fade masks switch from top-only to bottom or combined fades when the composer is visible.

^{Macroscope summarized 9cb5e8d.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.4 KiB	13.4 KiB	−16 B (−0.1%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.9 KiB	6.9 KiB	+5 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.6 KiB	6.5 KiB	−21 B (−0.3%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	55.0 KiB	55.0 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	13.5 KiB	13.4 KiB	−7 B (−0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.9 KiB	6.9 KiB	+2 B (+0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.6 KiB	6.6 KiB	−9 B (−0.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	55.8 KiB	55.8 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 883e1a3 · PR result: 9cb5e8d · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 109.4 KiB
• Claude decoded thread snapshot: 110.1 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved at 9cb5e8d

Macroscope's review found this PR approvable — This narrowly scoped web UI fix adjusts the timeline’s existing scroll masks so translucent composer banners do not overlap conversation content. Its impact is limited to presentation styling, with the scrollbar and minimap kept outside the content mask and no changes to data or application workflows.

Notes:

• No code objects were reviewed. Approvability was decided on eligibility alone.

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

Dismissing prior approval to re-evaluate 3298ebb

[macroscopeapp]

One finding on the new glass override in apps/web/src/index.css. Restoring the mask (dropping before:mask-none) looks right; pinning --glass-opacity to 100% for this one surface is the part that introduces a consistency regression.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two findings on the new timeline mask. The shared virtualized-scroll-fade contract is the right owner here, but the mask geometry it is handed is unclamped and drops the shared top-fade profile.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the composer/timeline fade changes for consistency with the shared scroll-fade contract. One finding on the new timeline bottom mask.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 87166b0. Configure here.}

Dismissing prior approval to re-evaluate 9cb5e8d

[GuilhermeVieiraDev]

Fixed on #8083 by Theo.

[t3-code]

summary

• restore the shared 17px attachment mask so banner fill never stacks under the translucent composer
• fade virtualized timeline content to fully transparent before the measured composer overlay begins, keeping conversation text out from behind attached banners and the composer
• preserve the shared eased topbar profile in the combined list mask, keep the scrollbar lane opaque, leave minimap chrome outside the mask, and clamp the bottom fade to at most 60% of timeline height
• preserve the user's Glass opacity setting across the banner, stack cap, drawers, and composer
• remove the stale before:mask-none assertion from fix(web): keep server update banners flush with the composer #8000

this keeps #8000's intended content occlusion without its overlap regression or a hardcoded opaque banner.

verification

• vp test run --project unit src/components/chat/ComposerBannerStack.test.tsx src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• vp fmt --check apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• web typecheck
• real web renderer at 1351x522, T3 Chat dark theme at 40% glass opacity
• masked glass without timeline fade: synthetic background text changed 22,090 visible banner pixels
• unmasked glass: banner/text affected 7,578 overlap pixels and 11,883 composer pixels
• final timeline fade: background text changed 0 pixels while banner opacity remained 40%; both standard and WebKit banner masks remained the shared 17px attachment mask
• verified the combined list mask reproduces the original responsive 48px top profile at 4.8/11.52/20.16/29.76/39.36/48px, retains the virtualized fade's separate opaque scrollbar layer, and leaves the parent viewport unmasked
• verified a simulated stale 9,999px overlay measurement resolves through min(9999px, 60%) instead of hiding the full timeline

visual proof uses the real app and production composer/banner/timeline components with a synthetic in-flight update item and synthetic background conversation text.

original text show-through

overlap regression

after

request provenance

• requested by: @extoci

---

Note

Low Risk
Visual masking and CSS class selection only; no changes to message data, auth, or composer logic beyond scroll-fade presentation.

Overview
Fixes conversation text showing through translucent composer banners by masking the virtualized timeline where the measured composer stack sits, instead of relying only on the topbar fade.

MessagesTimeline now sets --timeline-composer-overlay-height on the viewport from contentInsetEndAdjustment, clamped with min(..., 60%) so bad measurements cannot wipe the whole list. When that inset is positive, the LegendList uses virtualized-scroll-fade plus either timeline-scroll-bottom-fade or timeline-scroll-combined-fade (when topFadeEnabled), and keeps topbar-scroll-fade only when there is no composer overlay.

index.css adds those timeline utilities: they define --virtualized-scroll-fade-mask with a bottom gradient that fades to transparent at the overlay height (and the combined variant preserves the existing eased top profile, including the sm breakpoint).

^{Reviewed by Cursor Bugbot for commit 9cb5e8d. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix composer banner overlap in MessagesTimeline scroll fades

• Sets the --timeline-composer-overlay-height CSS variable on the timeline viewport when contentInsetEndAdjustment is non-zero.
• Adds timeline-scroll-bottom-fade and timeline-scroll-combined-fade utility classes to apply gradient masks that respect the composer height.
• Switches LegendList to use the new fade classes when a bottom inset exists, preserving topbar-scroll-fade only when the inset is zero.
• Behavioral Change: Scroll fade masks switch from top-only to bottom or combined fades when the composer is visible.

^{Macroscope summarized 9cb5e8d.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.4 KiB	13.4 KiB	−16 B (−0.1%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.9 KiB	6.9 KiB	+5 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.6 KiB	6.5 KiB	−21 B (−0.3%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	55.0 KiB	55.0 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	13.5 KiB	13.4 KiB	−7 B (−0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.9 KiB	6.9 KiB	+2 B (+0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.6 KiB	6.6 KiB	−9 B (−0.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	55.8 KiB	55.8 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 883e1a3 · PR result: 9cb5e8d · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 109.4 KiB
• Claude decoded thread snapshot: 110.1 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved at 9cb5e8d

Macroscope's review found this PR approvable — This narrowly scoped web UI fix adjusts the timeline’s existing scroll masks so translucent composer banners do not overlap conversation content. Its impact is limited to presentation styling, with the scrollbar and minimap kept outside the content mask and no changes to data or application workflows.

Notes:

• No code objects were reviewed. Approvability was decided on eligibility alone.

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

Dismissing prior approval to re-evaluate 3298ebb

[macroscopeapp]

One finding on the new glass override in apps/web/src/index.css. Restoring the mask (dropping before:mask-none) looks right; pinning --glass-opacity to 100% for this one surface is the part that introduces a consistency regression.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two findings on the new timeline mask. The shared virtualized-scroll-fade contract is the right owner here, but the mask geometry it is handed is unclamped and drops the shared top-fade profile.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the composer/timeline fade changes for consistency with the shared scroll-fade contract. One finding on the new timeline bottom mask.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 87166b0. Configure here.}

Dismissing prior approval to re-evaluate 9cb5e8d

[GuilhermeVieiraDev]

Fixed on #8083 by Theo.

[t3-code]

summary

• restore the shared 17px attachment mask so banner fill never stacks under the translucent composer
• fade virtualized timeline content to fully transparent before the measured composer overlay begins, keeping conversation text out from behind attached banners and the composer
• preserve the shared eased topbar profile in the combined list mask, keep the scrollbar lane opaque, leave minimap chrome outside the mask, and clamp the bottom fade to at most 60% of timeline height
• preserve the user's Glass opacity setting across the banner, stack cap, drawers, and composer
• remove the stale before:mask-none assertion from fix(web): keep server update banners flush with the composer #8000

this keeps #8000's intended content occlusion without its overlap regression or a hardcoded opaque banner.

verification

• vp test run --project unit src/components/chat/ComposerBannerStack.test.tsx src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• vp fmt --check apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• web typecheck
• real web renderer at 1351x522, T3 Chat dark theme at 40% glass opacity
• masked glass without timeline fade: synthetic background text changed 22,090 visible banner pixels
• unmasked glass: banner/text affected 7,578 overlap pixels and 11,883 composer pixels
• final timeline fade: background text changed 0 pixels while banner opacity remained 40%; both standard and WebKit banner masks remained the shared 17px attachment mask
• verified the combined list mask reproduces the original responsive 48px top profile at 4.8/11.52/20.16/29.76/39.36/48px, retains the virtualized fade's separate opaque scrollbar layer, and leaves the parent viewport unmasked
• verified a simulated stale 9,999px overlay measurement resolves through min(9999px, 60%) instead of hiding the full timeline

visual proof uses the real app and production composer/banner/timeline components with a synthetic in-flight update item and synthetic background conversation text.

original text show-through

overlap regression

after

request provenance

• requested by: @extoci

---

Note

Low Risk
Visual masking and CSS class selection only; no changes to message data, auth, or composer logic beyond scroll-fade presentation.

Overview
Fixes conversation text showing through translucent composer banners by masking the virtualized timeline where the measured composer stack sits, instead of relying only on the topbar fade.

MessagesTimeline now sets --timeline-composer-overlay-height on the viewport from contentInsetEndAdjustment, clamped with min(..., 60%) so bad measurements cannot wipe the whole list. When that inset is positive, the LegendList uses virtualized-scroll-fade plus either timeline-scroll-bottom-fade or timeline-scroll-combined-fade (when topFadeEnabled), and keeps topbar-scroll-fade only when there is no composer overlay.

index.css adds those timeline utilities: they define --virtualized-scroll-fade-mask with a bottom gradient that fades to transparent at the overlay height (and the combined variant preserves the existing eased top profile, including the sm breakpoint).

^{Reviewed by Cursor Bugbot for commit 9cb5e8d. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix composer banner overlap in MessagesTimeline scroll fades

• Sets the --timeline-composer-overlay-height CSS variable on the timeline viewport when contentInsetEndAdjustment is non-zero.
• Adds timeline-scroll-bottom-fade and timeline-scroll-combined-fade utility classes to apply gradient masks that respect the composer height.
• Switches LegendList to use the new fade classes when a bottom inset exists, preserving topbar-scroll-fade only when the inset is zero.
• Behavioral Change: Scroll fade masks switch from top-only to bottom or combined fades when the composer is visible.

^{Macroscope summarized 9cb5e8d.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.4 KiB	13.4 KiB	−16 B (−0.1%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.9 KiB	6.9 KiB	+5 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.6 KiB	6.5 KiB	−21 B (−0.3%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	55.0 KiB	55.0 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	13.5 KiB	13.4 KiB	−7 B (−0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.9 KiB	6.9 KiB	+2 B (+0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.6 KiB	6.6 KiB	−9 B (−0.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	55.8 KiB	55.8 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 883e1a3 · PR result: 9cb5e8d · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 109.4 KiB
• Claude decoded thread snapshot: 110.1 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved at 9cb5e8d

Macroscope's review found this PR approvable — This narrowly scoped web UI fix adjusts the timeline’s existing scroll masks so translucent composer banners do not overlap conversation content. Its impact is limited to presentation styling, with the scrollbar and minimap kept outside the content mask and no changes to data or application workflows.

Notes:

• No code objects were reviewed. Approvability was decided on eligibility alone.

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

Dismissing prior approval to re-evaluate 3298ebb

[macroscopeapp]

One finding on the new glass override in apps/web/src/index.css. Restoring the mask (dropping before:mask-none) looks right; pinning --glass-opacity to 100% for this one surface is the part that introduces a consistency regression.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two findings on the new timeline mask. The shared virtualized-scroll-fade contract is the right owner here, but the mask geometry it is handed is unclamped and drops the shared top-fade profile.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the composer/timeline fade changes for consistency with the shared scroll-fade contract. One finding on the new timeline bottom mask.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 87166b0. Configure here.}

Dismissing prior approval to re-evaluate 9cb5e8d

[GuilhermeVieiraDev]

Fixed on #8083 by Theo.

[t3-code]

summary

• restore the shared 17px attachment mask so banner fill never stacks under the translucent composer
• fade virtualized timeline content to fully transparent before the measured composer overlay begins, keeping conversation text out from behind attached banners and the composer
• preserve the shared eased topbar profile in the combined list mask, keep the scrollbar lane opaque, leave minimap chrome outside the mask, and clamp the bottom fade to at most 60% of timeline height
• preserve the user's Glass opacity setting across the banner, stack cap, drawers, and composer
• remove the stale before:mask-none assertion from fix(web): keep server update banners flush with the composer #8000

this keeps #8000's intended content occlusion without its overlap regression or a hardcoded opaque banner.

verification

• vp test run --project unit src/components/chat/ComposerBannerStack.test.tsx src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• vp fmt --check apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• web typecheck
• real web renderer at 1351x522, T3 Chat dark theme at 40% glass opacity
• masked glass without timeline fade: synthetic background text changed 22,090 visible banner pixels
• unmasked glass: banner/text affected 7,578 overlap pixels and 11,883 composer pixels
• final timeline fade: background text changed 0 pixels while banner opacity remained 40%; both standard and WebKit banner masks remained the shared 17px attachment mask
• verified the combined list mask reproduces the original responsive 48px top profile at 4.8/11.52/20.16/29.76/39.36/48px, retains the virtualized fade's separate opaque scrollbar layer, and leaves the parent viewport unmasked
• verified a simulated stale 9,999px overlay measurement resolves through min(9999px, 60%) instead of hiding the full timeline

visual proof uses the real app and production composer/banner/timeline components with a synthetic in-flight update item and synthetic background conversation text.

original text show-through

overlap regression

after

request provenance

• requested by: @extoci

---

Note

Low Risk
Visual masking and CSS class selection only; no changes to message data, auth, or composer logic beyond scroll-fade presentation.

Overview
Fixes conversation text showing through translucent composer banners by masking the virtualized timeline where the measured composer stack sits, instead of relying only on the topbar fade.

MessagesTimeline now sets --timeline-composer-overlay-height on the viewport from contentInsetEndAdjustment, clamped with min(..., 60%) so bad measurements cannot wipe the whole list. When that inset is positive, the LegendList uses virtualized-scroll-fade plus either timeline-scroll-bottom-fade or timeline-scroll-combined-fade (when topFadeEnabled), and keeps topbar-scroll-fade only when there is no composer overlay.

index.css adds those timeline utilities: they define --virtualized-scroll-fade-mask with a bottom gradient that fades to transparent at the overlay height (and the combined variant preserves the existing eased top profile, including the sm breakpoint).

^{Reviewed by Cursor Bugbot for commit 9cb5e8d. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix composer banner overlap in MessagesTimeline scroll fades

• Sets the --timeline-composer-overlay-height CSS variable on the timeline viewport when contentInsetEndAdjustment is non-zero.
• Adds timeline-scroll-bottom-fade and timeline-scroll-combined-fade utility classes to apply gradient masks that respect the composer height.
• Switches LegendList to use the new fade classes when a bottom inset exists, preserving topbar-scroll-fade only when the inset is zero.
• Behavioral Change: Scroll fade masks switch from top-only to bottom or combined fades when the composer is visible.

^{Macroscope summarized 9cb5e8d.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.4 KiB	13.4 KiB	−16 B (−0.1%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.9 KiB	6.9 KiB	+5 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.6 KiB	6.5 KiB	−21 B (−0.3%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	55.0 KiB	55.0 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	13.5 KiB	13.4 KiB	−7 B (−0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.9 KiB	6.9 KiB	+2 B (+0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.6 KiB	6.6 KiB	−9 B (−0.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	55.8 KiB	55.8 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 883e1a3 · PR result: 9cb5e8d · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 109.4 KiB
• Claude decoded thread snapshot: 110.1 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved at 9cb5e8d

Macroscope's review found this PR approvable — This narrowly scoped web UI fix adjusts the timeline’s existing scroll masks so translucent composer banners do not overlap conversation content. Its impact is limited to presentation styling, with the scrollbar and minimap kept outside the content mask and no changes to data or application workflows.

Notes:

• No code objects were reviewed. Approvability was decided on eligibility alone.

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

Dismissing prior approval to re-evaluate 3298ebb

[macroscopeapp]

One finding on the new glass override in apps/web/src/index.css. Restoring the mask (dropping before:mask-none) looks right; pinning --glass-opacity to 100% for this one surface is the part that introduces a consistency regression.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two findings on the new timeline mask. The shared virtualized-scroll-fade contract is the right owner here, but the mask geometry it is handed is unclamped and drops the shared top-fade profile.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the composer/timeline fade changes for consistency with the shared scroll-fade contract. One finding on the new timeline bottom mask.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 87166b0. Configure here.}

Dismissing prior approval to re-evaluate 9cb5e8d

[GuilhermeVieiraDev]

Fixed on #8083 by Theo.

[t3-code]

summary

• restore the shared 17px attachment mask so banner fill never stacks under the translucent composer
• fade virtualized timeline content to fully transparent before the measured composer overlay begins, keeping conversation text out from behind attached banners and the composer
• preserve the shared eased topbar profile in the combined list mask, keep the scrollbar lane opaque, leave minimap chrome outside the mask, and clamp the bottom fade to at most 60% of timeline height
• preserve the user's Glass opacity setting across the banner, stack cap, drawers, and composer
• remove the stale before:mask-none assertion from fix(web): keep server update banners flush with the composer #8000

this keeps #8000's intended content occlusion without its overlap regression or a hardcoded opaque banner.

verification

• vp test run --project unit src/components/chat/ComposerBannerStack.test.tsx src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• vp fmt --check apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• web typecheck
• real web renderer at 1351x522, T3 Chat dark theme at 40% glass opacity
• masked glass without timeline fade: synthetic background text changed 22,090 visible banner pixels
• unmasked glass: banner/text affected 7,578 overlap pixels and 11,883 composer pixels
• final timeline fade: background text changed 0 pixels while banner opacity remained 40%; both standard and WebKit banner masks remained the shared 17px attachment mask
• verified the combined list mask reproduces the original responsive 48px top profile at 4.8/11.52/20.16/29.76/39.36/48px, retains the virtualized fade's separate opaque scrollbar layer, and leaves the parent viewport unmasked
• verified a simulated stale 9,999px overlay measurement resolves through min(9999px, 60%) instead of hiding the full timeline

visual proof uses the real app and production composer/banner/timeline components with a synthetic in-flight update item and synthetic background conversation text.

original text show-through

overlap regression

after

request provenance

• requested by: @extoci

---

Note

Low Risk
Visual masking and CSS class selection only; no changes to message data, auth, or composer logic beyond scroll-fade presentation.

Overview
Fixes conversation text showing through translucent composer banners by masking the virtualized timeline where the measured composer stack sits, instead of relying only on the topbar fade.

MessagesTimeline now sets --timeline-composer-overlay-height on the viewport from contentInsetEndAdjustment, clamped with min(..., 60%) so bad measurements cannot wipe the whole list. When that inset is positive, the LegendList uses virtualized-scroll-fade plus either timeline-scroll-bottom-fade or timeline-scroll-combined-fade (when topFadeEnabled), and keeps topbar-scroll-fade only when there is no composer overlay.

index.css adds those timeline utilities: they define --virtualized-scroll-fade-mask with a bottom gradient that fades to transparent at the overlay height (and the combined variant preserves the existing eased top profile, including the sm breakpoint).

^{Reviewed by Cursor Bugbot for commit 9cb5e8d. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix composer banner overlap in MessagesTimeline scroll fades

• Sets the --timeline-composer-overlay-height CSS variable on the timeline viewport when contentInsetEndAdjustment is non-zero.
• Adds timeline-scroll-bottom-fade and timeline-scroll-combined-fade utility classes to apply gradient masks that respect the composer height.
• Switches LegendList to use the new fade classes when a bottom inset exists, preserving topbar-scroll-fade only when the inset is zero.
• Behavioral Change: Scroll fade masks switch from top-only to bottom or combined fades when the composer is visible.

^{Macroscope summarized 9cb5e8d.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.4 KiB	13.4 KiB	−16 B (−0.1%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.9 KiB	6.9 KiB	+5 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.6 KiB	6.5 KiB	−21 B (−0.3%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	55.0 KiB	55.0 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	13.5 KiB	13.4 KiB	−7 B (−0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.9 KiB	6.9 KiB	+2 B (+0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.6 KiB	6.6 KiB	−9 B (−0.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	55.8 KiB	55.8 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 883e1a3 · PR result: 9cb5e8d · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 109.4 KiB
• Claude decoded thread snapshot: 110.1 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved at 9cb5e8d

Macroscope's review found this PR approvable — This narrowly scoped web UI fix adjusts the timeline’s existing scroll masks so translucent composer banners do not overlap conversation content. Its impact is limited to presentation styling, with the scrollbar and minimap kept outside the content mask and no changes to data or application workflows.

Notes:

• No code objects were reviewed. Approvability was decided on eligibility alone.

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

Dismissing prior approval to re-evaluate 3298ebb

[macroscopeapp]

One finding on the new glass override in apps/web/src/index.css. Restoring the mask (dropping before:mask-none) looks right; pinning --glass-opacity to 100% for this one surface is the part that introduces a consistency regression.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two findings on the new timeline mask. The shared virtualized-scroll-fade contract is the right owner here, but the mask geometry it is handed is unclamped and drops the shared top-fade profile.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the composer/timeline fade changes for consistency with the shared scroll-fade contract. One finding on the new timeline bottom mask.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 87166b0. Configure here.}

Dismissing prior approval to re-evaluate 9cb5e8d

[GuilhermeVieiraDev]

Fixed on #8083 by Theo.

[t3-code]

summary

• restore the shared 17px attachment mask so banner fill never stacks under the translucent composer
• fade virtualized timeline content to fully transparent before the measured composer overlay begins, keeping conversation text out from behind attached banners and the composer
• preserve the shared eased topbar profile in the combined list mask, keep the scrollbar lane opaque, leave minimap chrome outside the mask, and clamp the bottom fade to at most 60% of timeline height
• preserve the user's Glass opacity setting across the banner, stack cap, drawers, and composer
• remove the stale before:mask-none assertion from fix(web): keep server update banners flush with the composer #8000

this keeps #8000's intended content occlusion without its overlap regression or a hardcoded opaque banner.

verification

• vp test run --project unit src/components/chat/ComposerBannerStack.test.tsx src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• vp fmt --check apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• web typecheck
• real web renderer at 1351x522, T3 Chat dark theme at 40% glass opacity
• masked glass without timeline fade: synthetic background text changed 22,090 visible banner pixels
• unmasked glass: banner/text affected 7,578 overlap pixels and 11,883 composer pixels
• final timeline fade: background text changed 0 pixels while banner opacity remained 40%; both standard and WebKit banner masks remained the shared 17px attachment mask
• verified the combined list mask reproduces the original responsive 48px top profile at 4.8/11.52/20.16/29.76/39.36/48px, retains the virtualized fade's separate opaque scrollbar layer, and leaves the parent viewport unmasked
• verified a simulated stale 9,999px overlay measurement resolves through min(9999px, 60%) instead of hiding the full timeline

visual proof uses the real app and production composer/banner/timeline components with a synthetic in-flight update item and synthetic background conversation text.

original text show-through

overlap regression

after

request provenance

• requested by: @extoci

---

Note

Low Risk
Visual masking and CSS class selection only; no changes to message data, auth, or composer logic beyond scroll-fade presentation.

Overview
Fixes conversation text showing through translucent composer banners by masking the virtualized timeline where the measured composer stack sits, instead of relying only on the topbar fade.

MessagesTimeline now sets --timeline-composer-overlay-height on the viewport from contentInsetEndAdjustment, clamped with min(..., 60%) so bad measurements cannot wipe the whole list. When that inset is positive, the LegendList uses virtualized-scroll-fade plus either timeline-scroll-bottom-fade or timeline-scroll-combined-fade (when topFadeEnabled), and keeps topbar-scroll-fade only when there is no composer overlay.

index.css adds those timeline utilities: they define --virtualized-scroll-fade-mask with a bottom gradient that fades to transparent at the overlay height (and the combined variant preserves the existing eased top profile, including the sm breakpoint).

^{Reviewed by Cursor Bugbot for commit 9cb5e8d. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix composer banner overlap in MessagesTimeline scroll fades

• Sets the --timeline-composer-overlay-height CSS variable on the timeline viewport when contentInsetEndAdjustment is non-zero.
• Adds timeline-scroll-bottom-fade and timeline-scroll-combined-fade utility classes to apply gradient masks that respect the composer height.
• Switches LegendList to use the new fade classes when a bottom inset exists, preserving topbar-scroll-fade only when the inset is zero.
• Behavioral Change: Scroll fade masks switch from top-only to bottom or combined fades when the composer is visible.

^{Macroscope summarized 9cb5e8d.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.4 KiB	13.4 KiB	−16 B (−0.1%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.9 KiB	6.9 KiB	+5 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.6 KiB	6.5 KiB	−21 B (−0.3%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	55.0 KiB	55.0 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	13.5 KiB	13.4 KiB	−7 B (−0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.9 KiB	6.9 KiB	+2 B (+0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.6 KiB	6.6 KiB	−9 B (−0.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	55.8 KiB	55.8 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 883e1a3 · PR result: 9cb5e8d · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 109.4 KiB
• Claude decoded thread snapshot: 110.1 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved at 9cb5e8d

Macroscope's review found this PR approvable — This narrowly scoped web UI fix adjusts the timeline’s existing scroll masks so translucent composer banners do not overlap conversation content. Its impact is limited to presentation styling, with the scrollbar and minimap kept outside the content mask and no changes to data or application workflows.

Notes:

• No code objects were reviewed. Approvability was decided on eligibility alone.

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

Dismissing prior approval to re-evaluate 3298ebb

[macroscopeapp]

One finding on the new glass override in apps/web/src/index.css. Restoring the mask (dropping before:mask-none) looks right; pinning --glass-opacity to 100% for this one surface is the part that introduces a consistency regression.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two findings on the new timeline mask. The shared virtualized-scroll-fade contract is the right owner here, but the mask geometry it is handed is unclamped and drops the shared top-fade profile.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the composer/timeline fade changes for consistency with the shared scroll-fade contract. One finding on the new timeline bottom mask.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 87166b0. Configure here.}

Dismissing prior approval to re-evaluate 9cb5e8d

[GuilhermeVieiraDev]

Fixed on #8083 by Theo.

[t3-code]

summary

• restore the shared 17px attachment mask so banner fill never stacks under the translucent composer
• fade virtualized timeline content to fully transparent before the measured composer overlay begins, keeping conversation text out from behind attached banners and the composer
• preserve the shared eased topbar profile in the combined list mask, keep the scrollbar lane opaque, leave minimap chrome outside the mask, and clamp the bottom fade to at most 60% of timeline height
• preserve the user's Glass opacity setting across the banner, stack cap, drawers, and composer
• remove the stale before:mask-none assertion from fix(web): keep server update banners flush with the composer #8000

this keeps #8000's intended content occlusion without its overlap regression or a hardcoded opaque banner.

verification

• vp test run --project unit src/components/chat/ComposerBannerStack.test.tsx src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• vp fmt --check apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• web typecheck
• real web renderer at 1351x522, T3 Chat dark theme at 40% glass opacity
• masked glass without timeline fade: synthetic background text changed 22,090 visible banner pixels
• unmasked glass: banner/text affected 7,578 overlap pixels and 11,883 composer pixels
• final timeline fade: background text changed 0 pixels while banner opacity remained 40%; both standard and WebKit banner masks remained the shared 17px attachment mask
• verified the combined list mask reproduces the original responsive 48px top profile at 4.8/11.52/20.16/29.76/39.36/48px, retains the virtualized fade's separate opaque scrollbar layer, and leaves the parent viewport unmasked
• verified a simulated stale 9,999px overlay measurement resolves through min(9999px, 60%) instead of hiding the full timeline

visual proof uses the real app and production composer/banner/timeline components with a synthetic in-flight update item and synthetic background conversation text.

original text show-through

overlap regression

after

request provenance

• requested by: @extoci

---

Note

Low Risk
Visual masking and CSS class selection only; no changes to message data, auth, or composer logic beyond scroll-fade presentation.

Overview
Fixes conversation text showing through translucent composer banners by masking the virtualized timeline where the measured composer stack sits, instead of relying only on the topbar fade.

MessagesTimeline now sets --timeline-composer-overlay-height on the viewport from contentInsetEndAdjustment, clamped with min(..., 60%) so bad measurements cannot wipe the whole list. When that inset is positive, the LegendList uses virtualized-scroll-fade plus either timeline-scroll-bottom-fade or timeline-scroll-combined-fade (when topFadeEnabled), and keeps topbar-scroll-fade only when there is no composer overlay.

index.css adds those timeline utilities: they define --virtualized-scroll-fade-mask with a bottom gradient that fades to transparent at the overlay height (and the combined variant preserves the existing eased top profile, including the sm breakpoint).

^{Reviewed by Cursor Bugbot for commit 9cb5e8d. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix composer banner overlap in MessagesTimeline scroll fades

• Sets the --timeline-composer-overlay-height CSS variable on the timeline viewport when contentInsetEndAdjustment is non-zero.
• Adds timeline-scroll-bottom-fade and timeline-scroll-combined-fade utility classes to apply gradient masks that respect the composer height.
• Switches LegendList to use the new fade classes when a bottom inset exists, preserving topbar-scroll-fade only when the inset is zero.
• Behavioral Change: Scroll fade masks switch from top-only to bottom or combined fades when the composer is visible.

^{Macroscope summarized 9cb5e8d.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.4 KiB	13.4 KiB	−16 B (−0.1%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.9 KiB	6.9 KiB	+5 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.6 KiB	6.5 KiB	−21 B (−0.3%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	55.0 KiB	55.0 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	13.5 KiB	13.4 KiB	−7 B (−0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.9 KiB	6.9 KiB	+2 B (+0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.6 KiB	6.6 KiB	−9 B (−0.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	55.8 KiB	55.8 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 883e1a3 · PR result: 9cb5e8d · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 109.4 KiB
• Claude decoded thread snapshot: 110.1 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved at 9cb5e8d

Macroscope's review found this PR approvable — This narrowly scoped web UI fix adjusts the timeline’s existing scroll masks so translucent composer banners do not overlap conversation content. Its impact is limited to presentation styling, with the scrollbar and minimap kept outside the content mask and no changes to data or application workflows.

Notes:

• No code objects were reviewed. Approvability was decided on eligibility alone.

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

Dismissing prior approval to re-evaluate 3298ebb

[macroscopeapp]

One finding on the new glass override in apps/web/src/index.css. Restoring the mask (dropping before:mask-none) looks right; pinning --glass-opacity to 100% for this one surface is the part that introduces a consistency regression.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two findings on the new timeline mask. The shared virtualized-scroll-fade contract is the right owner here, but the mask geometry it is handed is unclamped and drops the shared top-fade profile.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the composer/timeline fade changes for consistency with the shared scroll-fade contract. One finding on the new timeline bottom mask.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 87166b0. Configure here.}

Dismissing prior approval to re-evaluate 9cb5e8d

[GuilhermeVieiraDev]

Fixed on #8083 by Theo.

[t3-code]

summary

• restore the shared 17px attachment mask so banner fill never stacks under the translucent composer
• fade virtualized timeline content to fully transparent before the measured composer overlay begins, keeping conversation text out from behind attached banners and the composer
• preserve the shared eased topbar profile in the combined list mask, keep the scrollbar lane opaque, leave minimap chrome outside the mask, and clamp the bottom fade to at most 60% of timeline height
• preserve the user's Glass opacity setting across the banner, stack cap, drawers, and composer
• remove the stale before:mask-none assertion from fix(web): keep server update banners flush with the composer #8000

this keeps #8000's intended content occlusion without its overlap regression or a hardcoded opaque banner.

verification

• vp test run --project unit src/components/chat/ComposerBannerStack.test.tsx src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• vp fmt --check apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• web typecheck
• real web renderer at 1351x522, T3 Chat dark theme at 40% glass opacity
• masked glass without timeline fade: synthetic background text changed 22,090 visible banner pixels
• unmasked glass: banner/text affected 7,578 overlap pixels and 11,883 composer pixels
• final timeline fade: background text changed 0 pixels while banner opacity remained 40%; both standard and WebKit banner masks remained the shared 17px attachment mask
• verified the combined list mask reproduces the original responsive 48px top profile at 4.8/11.52/20.16/29.76/39.36/48px, retains the virtualized fade's separate opaque scrollbar layer, and leaves the parent viewport unmasked
• verified a simulated stale 9,999px overlay measurement resolves through min(9999px, 60%) instead of hiding the full timeline

visual proof uses the real app and production composer/banner/timeline components with a synthetic in-flight update item and synthetic background conversation text.

original text show-through

overlap regression

after

request provenance

• requested by: @extoci

---

Note

Low Risk
Visual masking and CSS class selection only; no changes to message data, auth, or composer logic beyond scroll-fade presentation.

Overview
Fixes conversation text showing through translucent composer banners by masking the virtualized timeline where the measured composer stack sits, instead of relying only on the topbar fade.

MessagesTimeline now sets --timeline-composer-overlay-height on the viewport from contentInsetEndAdjustment, clamped with min(..., 60%) so bad measurements cannot wipe the whole list. When that inset is positive, the LegendList uses virtualized-scroll-fade plus either timeline-scroll-bottom-fade or timeline-scroll-combined-fade (when topFadeEnabled), and keeps topbar-scroll-fade only when there is no composer overlay.

index.css adds those timeline utilities: they define --virtualized-scroll-fade-mask with a bottom gradient that fades to transparent at the overlay height (and the combined variant preserves the existing eased top profile, including the sm breakpoint).

^{Reviewed by Cursor Bugbot for commit 9cb5e8d. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix composer banner overlap in MessagesTimeline scroll fades

• Sets the --timeline-composer-overlay-height CSS variable on the timeline viewport when contentInsetEndAdjustment is non-zero.
• Adds timeline-scroll-bottom-fade and timeline-scroll-combined-fade utility classes to apply gradient masks that respect the composer height.
• Switches LegendList to use the new fade classes when a bottom inset exists, preserving topbar-scroll-fade only when the inset is zero.
• Behavioral Change: Scroll fade masks switch from top-only to bottom or combined fades when the composer is visible.

^{Macroscope summarized 9cb5e8d.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.4 KiB	13.4 KiB	−16 B (−0.1%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.9 KiB	6.9 KiB	+5 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.6 KiB	6.5 KiB	−21 B (−0.3%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	55.0 KiB	55.0 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	13.5 KiB	13.4 KiB	−7 B (−0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.9 KiB	6.9 KiB	+2 B (+0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.6 KiB	6.6 KiB	−9 B (−0.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	55.8 KiB	55.8 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 883e1a3 · PR result: 9cb5e8d · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 109.4 KiB
• Claude decoded thread snapshot: 110.1 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved at 9cb5e8d

Macroscope's review found this PR approvable — This narrowly scoped web UI fix adjusts the timeline’s existing scroll masks so translucent composer banners do not overlap conversation content. Its impact is limited to presentation styling, with the scrollbar and minimap kept outside the content mask and no changes to data or application workflows.

Notes:

• No code objects were reviewed. Approvability was decided on eligibility alone.

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

Dismissing prior approval to re-evaluate 3298ebb

[macroscopeapp]

One finding on the new glass override in apps/web/src/index.css. Restoring the mask (dropping before:mask-none) looks right; pinning --glass-opacity to 100% for this one surface is the part that introduces a consistency regression.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two findings on the new timeline mask. The shared virtualized-scroll-fade contract is the right owner here, but the mask geometry it is handed is unclamped and drops the shared top-fade profile.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the composer/timeline fade changes for consistency with the shared scroll-fade contract. One finding on the new timeline bottom mask.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 87166b0. Configure here.}

Dismissing prior approval to re-evaluate 9cb5e8d

[GuilhermeVieiraDev]

Fixed on #8083 by Theo.