fix(session): header backdrop-blur off while the context-tree band is open

[kateebonner]

What

Kate reported a soft grey vertical smear ("bleed") along the transcript's left edge in sessions showing the context-tree/constellation band, light theme.

Root cause (reproduced + pixel-diffed in a browser harness)

The sticky session header ([data-session-title], message-timeline.tsx) carries backdrop-blur-[10px] over its whole padding box, with a background gradient opaque only for the first 48px. Slim headers hide the blur under the opaque title strip — but when the context-tree band renders, the header grows to ~300px and the band sits inside the md:pl-4 padding. That leaves a 16px transparent gutter ~225px tall where the blur is fully exposed: transcript content scrolling beneath (straight card edges, dark text) gets sampled and smeared into a grey streak. The right gutter has the same defect but ragged line-ends make it invisible. A/B screenshots with only backdrop-filter toggled produce a pixel-diff strip exactly in the gutter with Gaussian falloff — confirmed causation.

Fix

One-line gate, mirroring the existing pb-4/pb-2 conditionals two lines below: "backdrop-blur-[10px]": !contextTreeVisible(). With the tree open the band is opaque below the title strip anyway, so the blur contributed nothing there; slim headers keep the frosted fade. (If the frosted look must survive with the tree open, the thorough alternative is a masked inset-0 underlay whose blur fades with the gradient — deliberately not taken here.)

Note: #66 (message-timeline audit stack) touches this file — trivial to rebase whichever lands second.

Verification

• npm run lint: 0 errors; tsgo -b packages/app: clean
• Visual re-verification in the harness after re-vendor (screenshots in session notes)

🤖 Generated with Claude Code

[kateebonner]

What

Kate reported a soft grey vertical smear ("bleed") along the transcript's left edge in sessions showing the context-tree/constellation band, light theme.

Root cause (reproduced + pixel-diffed in a browser harness)

The sticky session header ([data-session-title], message-timeline.tsx) carries backdrop-blur-[10px] over its whole padding box, with a background gradient opaque only for the first 48px. Slim headers hide the blur under the opaque title strip — but when the context-tree band renders, the header grows to ~300px and the band sits inside the md:pl-4 padding. That leaves a 16px transparent gutter ~225px tall where the blur is fully exposed: transcript content scrolling beneath (straight card edges, dark text) gets sampled and smeared into a grey streak. The right gutter has the same defect but ragged line-ends make it invisible. A/B screenshots with only backdrop-filter toggled produce a pixel-diff strip exactly in the gutter with Gaussian falloff — confirmed causation.

Fix

One-line gate, mirroring the existing pb-4/pb-2 conditionals two lines below: "backdrop-blur-[10px]": !contextTreeVisible(). With the tree open the band is opaque below the title strip anyway, so the blur contributed nothing there; slim headers keep the frosted fade. (If the frosted look must survive with the tree open, the thorough alternative is a masked inset-0 underlay whose blur fades with the gradient — deliberately not taken here.)

Note: #66 (message-timeline audit stack) touches this file — trivial to rebase whichever lands second.

Verification

• npm run lint: 0 errors; tsgo -b packages/app: clean
• Visual re-verification in the harness after re-vendor (screenshots in session notes)

🤖 Generated with Claude Code

[kateebonner]

What

Kate reported a soft grey vertical smear ("bleed") along the transcript's left edge in sessions showing the context-tree/constellation band, light theme.

Root cause (reproduced + pixel-diffed in a browser harness)

The sticky session header ([data-session-title], message-timeline.tsx) carries backdrop-blur-[10px] over its whole padding box, with a background gradient opaque only for the first 48px. Slim headers hide the blur under the opaque title strip — but when the context-tree band renders, the header grows to ~300px and the band sits inside the md:pl-4 padding. That leaves a 16px transparent gutter ~225px tall where the blur is fully exposed: transcript content scrolling beneath (straight card edges, dark text) gets sampled and smeared into a grey streak. The right gutter has the same defect but ragged line-ends make it invisible. A/B screenshots with only backdrop-filter toggled produce a pixel-diff strip exactly in the gutter with Gaussian falloff — confirmed causation.

Fix

One-line gate, mirroring the existing pb-4/pb-2 conditionals two lines below: "backdrop-blur-[10px]": !contextTreeVisible(). With the tree open the band is opaque below the title strip anyway, so the blur contributed nothing there; slim headers keep the frosted fade. (If the frosted look must survive with the tree open, the thorough alternative is a masked inset-0 underlay whose blur fades with the gradient — deliberately not taken here.)

Note: #66 (message-timeline audit stack) touches this file — trivial to rebase whichever lands second.

Verification

• npm run lint: 0 errors; tsgo -b packages/app: clean
• Visual re-verification in the harness after re-vendor (screenshots in session notes)

🤖 Generated with Claude Code

[kateebonner]

What

Kate reported a soft grey vertical smear ("bleed") along the transcript's left edge in sessions showing the context-tree/constellation band, light theme.

Root cause (reproduced + pixel-diffed in a browser harness)

The sticky session header ([data-session-title], message-timeline.tsx) carries backdrop-blur-[10px] over its whole padding box, with a background gradient opaque only for the first 48px. Slim headers hide the blur under the opaque title strip — but when the context-tree band renders, the header grows to ~300px and the band sits inside the md:pl-4 padding. That leaves a 16px transparent gutter ~225px tall where the blur is fully exposed: transcript content scrolling beneath (straight card edges, dark text) gets sampled and smeared into a grey streak. The right gutter has the same defect but ragged line-ends make it invisible. A/B screenshots with only backdrop-filter toggled produce a pixel-diff strip exactly in the gutter with Gaussian falloff — confirmed causation.

Fix

One-line gate, mirroring the existing pb-4/pb-2 conditionals two lines below: "backdrop-blur-[10px]": !contextTreeVisible(). With the tree open the band is opaque below the title strip anyway, so the blur contributed nothing there; slim headers keep the frosted fade. (If the frosted look must survive with the tree open, the thorough alternative is a masked inset-0 underlay whose blur fades with the gradient — deliberately not taken here.)

Note: #66 (message-timeline audit stack) touches this file — trivial to rebase whichever lands second.

Verification

• npm run lint: 0 errors; tsgo -b packages/app: clean
• Visual re-verification in the harness after re-vendor (screenshots in session notes)

🤖 Generated with Claude Code

[kateebonner]

What

Kate reported a soft grey vertical smear ("bleed") along the transcript's left edge in sessions showing the context-tree/constellation band, light theme.

Root cause (reproduced + pixel-diffed in a browser harness)

The sticky session header ([data-session-title], message-timeline.tsx) carries backdrop-blur-[10px] over its whole padding box, with a background gradient opaque only for the first 48px. Slim headers hide the blur under the opaque title strip — but when the context-tree band renders, the header grows to ~300px and the band sits inside the md:pl-4 padding. That leaves a 16px transparent gutter ~225px tall where the blur is fully exposed: transcript content scrolling beneath (straight card edges, dark text) gets sampled and smeared into a grey streak. The right gutter has the same defect but ragged line-ends make it invisible. A/B screenshots with only backdrop-filter toggled produce a pixel-diff strip exactly in the gutter with Gaussian falloff — confirmed causation.

Fix

One-line gate, mirroring the existing pb-4/pb-2 conditionals two lines below: "backdrop-blur-[10px]": !contextTreeVisible(). With the tree open the band is opaque below the title strip anyway, so the blur contributed nothing there; slim headers keep the frosted fade. (If the frosted look must survive with the tree open, the thorough alternative is a masked inset-0 underlay whose blur fades with the gradient — deliberately not taken here.)

Note: #66 (message-timeline audit stack) touches this file — trivial to rebase whichever lands second.

Verification

• npm run lint: 0 errors; tsgo -b packages/app: clean
• Visual re-verification in the harness after re-vendor (screenshots in session notes)

🤖 Generated with Claude Code

[kateebonner]

What

Kate reported a soft grey vertical smear ("bleed") along the transcript's left edge in sessions showing the context-tree/constellation band, light theme.

Root cause (reproduced + pixel-diffed in a browser harness)

The sticky session header ([data-session-title], message-timeline.tsx) carries backdrop-blur-[10px] over its whole padding box, with a background gradient opaque only for the first 48px. Slim headers hide the blur under the opaque title strip — but when the context-tree band renders, the header grows to ~300px and the band sits inside the md:pl-4 padding. That leaves a 16px transparent gutter ~225px tall where the blur is fully exposed: transcript content scrolling beneath (straight card edges, dark text) gets sampled and smeared into a grey streak. The right gutter has the same defect but ragged line-ends make it invisible. A/B screenshots with only backdrop-filter toggled produce a pixel-diff strip exactly in the gutter with Gaussian falloff — confirmed causation.

Fix

One-line gate, mirroring the existing pb-4/pb-2 conditionals two lines below: "backdrop-blur-[10px]": !contextTreeVisible(). With the tree open the band is opaque below the title strip anyway, so the blur contributed nothing there; slim headers keep the frosted fade. (If the frosted look must survive with the tree open, the thorough alternative is a masked inset-0 underlay whose blur fades with the gradient — deliberately not taken here.)

Note: #66 (message-timeline audit stack) touches this file — trivial to rebase whichever lands second.

Verification

• npm run lint: 0 errors; tsgo -b packages/app: clean
• Visual re-verification in the harness after re-vendor (screenshots in session notes)

🤖 Generated with Claude Code

[kateebonner]

What

Kate reported a soft grey vertical smear ("bleed") along the transcript's left edge in sessions showing the context-tree/constellation band, light theme.

Root cause (reproduced + pixel-diffed in a browser harness)

The sticky session header ([data-session-title], message-timeline.tsx) carries backdrop-blur-[10px] over its whole padding box, with a background gradient opaque only for the first 48px. Slim headers hide the blur under the opaque title strip — but when the context-tree band renders, the header grows to ~300px and the band sits inside the md:pl-4 padding. That leaves a 16px transparent gutter ~225px tall where the blur is fully exposed: transcript content scrolling beneath (straight card edges, dark text) gets sampled and smeared into a grey streak. The right gutter has the same defect but ragged line-ends make it invisible. A/B screenshots with only backdrop-filter toggled produce a pixel-diff strip exactly in the gutter with Gaussian falloff — confirmed causation.

Fix

One-line gate, mirroring the existing pb-4/pb-2 conditionals two lines below: "backdrop-blur-[10px]": !contextTreeVisible(). With the tree open the band is opaque below the title strip anyway, so the blur contributed nothing there; slim headers keep the frosted fade. (If the frosted look must survive with the tree open, the thorough alternative is a masked inset-0 underlay whose blur fades with the gradient — deliberately not taken here.)

Note: #66 (message-timeline audit stack) touches this file — trivial to rebase whichever lands second.

Verification

• npm run lint: 0 errors; tsgo -b packages/app: clean
• Visual re-verification in the harness after re-vendor (screenshots in session notes)

🤖 Generated with Claude Code

[kateebonner]

What

Kate reported a soft grey vertical smear ("bleed") along the transcript's left edge in sessions showing the context-tree/constellation band, light theme.

Root cause (reproduced + pixel-diffed in a browser harness)

The sticky session header ([data-session-title], message-timeline.tsx) carries backdrop-blur-[10px] over its whole padding box, with a background gradient opaque only for the first 48px. Slim headers hide the blur under the opaque title strip — but when the context-tree band renders, the header grows to ~300px and the band sits inside the md:pl-4 padding. That leaves a 16px transparent gutter ~225px tall where the blur is fully exposed: transcript content scrolling beneath (straight card edges, dark text) gets sampled and smeared into a grey streak. The right gutter has the same defect but ragged line-ends make it invisible. A/B screenshots with only backdrop-filter toggled produce a pixel-diff strip exactly in the gutter with Gaussian falloff — confirmed causation.

Fix

One-line gate, mirroring the existing pb-4/pb-2 conditionals two lines below: "backdrop-blur-[10px]": !contextTreeVisible(). With the tree open the band is opaque below the title strip anyway, so the blur contributed nothing there; slim headers keep the frosted fade. (If the frosted look must survive with the tree open, the thorough alternative is a masked inset-0 underlay whose blur fades with the gradient — deliberately not taken here.)

Note: #66 (message-timeline audit stack) touches this file — trivial to rebase whichever lands second.

Verification

• npm run lint: 0 errors; tsgo -b packages/app: clean
• Visual re-verification in the harness after re-vendor (screenshots in session notes)

🤖 Generated with Claude Code