fix(AppShell): agent sidebar sometimes paints with no background#324
Merged
Conversation
The agent sidebar sometimes rendered with no background. The body's measured height feeds AgentSidebarHeader's single full-window shape (the fill); when that height is 0 the header falls back to a body-less cap and the panel paints with no background. The height came from a ResizeObserver in an [isOpen]-keyed effect, but the body node mounts on `isOpen && sidebarWidth > 0` — a condition that flips true WITHOUT isOpen changing on the reload-restore path (open stays true while the width seeds 0 -> >0, and the async width GET lands the same way). The effect missed that mount, so the observer never attached, agentBodyH stayed 0, and the background was missing until an unrelated close+reopen toggled isOpen. A callback ref binds the observer to the actual DOM mount/unmount, so it can never desync from the render condition. Adds a regression test asserting the body is observed on a reload-restore open (open=true from mount, width seeds after) — pre-fix that mount went unobserved. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
Storybook Preview: https://mirrorstack-ai.github.io/web-ui-kit/pr/324/ |
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.
Bug
The agent sidebar sometimes renders with no background (transparent panel — the page shows through). It reproduces on reload when the sidebar was left open, not on a fresh in-session open.
Root cause
The body's background is drawn as a single full-window shape by
AgentSidebarHeader, gated onwindowBodyHeight != null. That value isagentBodyH— the body's measured height. The body div itself is intentionally transparent (the shape supplies the fill), soagentBodyH === 0⇒ header falls back to a body-less cap ⇒ no background.agentBodyHwas measured by aResizeObserverin an effect keyed on[isOpen]. But the body node mounts onisOpen && sidebarWidth > 0, and that condition can flip true withoutisOpenchanging: on the reload-restore pathopenstaystruefrom mount while the width seeds0 → >0(and the async width GET lands the same way). The effect never re-ran after the node mounted, so the observer never attached,agentBodyHstayed0, and the sidebar had no background until an unrelated close+reopen toggledisOpen.Fix
Attach the observer through a callback ref instead of a
[isOpen]-keyed effect, so it fires exactly when the body node mounts/unmounts — it can never desync from the render condition. This fixes the class of bug (any mount trigger), not just this instance. StrictMode-safe (disconnects before re-observing; disconnects on null).Verification
opentrue from mount, width seeds after), the body node is observed. Pre-fix that mount went unobserved (test fails on old code).pnpm typecheckgreen;pnpm test786/786 pass.Code-only — no version bump (kit rolls up to 0.6.0 separately). Touched files are lint-clean; the 2 pre-existing
react-hooks/exhaustive-depserrors onmain(SidebarProvider.tsx,useAgentSession.ts) are unrelated to this diff.