fix(AgentSidebarHeader): draw the agent window as one shape to kill the header↔body seam#318
Merged
Merged
Conversation
…he header↔body seam Add a `windowBodyHeight` prop. When set, the header renders the whole window as a single <Notch notchSide="bottom"> — the rounded body with the active tab notched out of its top edge, filled once — instead of a separate headOnly tab cap. The tab and body become one surface, so the 1px header↔body seam that aliased on fractional-DPI (Windows) displays can no longer exist; it stays invisible on integer-DPR/retina too. Back-compat: without windowBodyHeight the header draws the original headOnly tab cap unchanged. Shared notch appearance is hoisted into one TAB_NOTCH_BASE object spread by both branches. Also nudge the history (previous-conversations) dropdown 2px left (left:4→2) to realign its notch after a prior Notch border shift. Bump 0.5.13 → 0.5.14. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
Storybook Preview: https://mirrorstack-ai.github.io/web-ui-kit/pr/318/ |
… actually used AppShell and the AgentSidebar stories assembled the window the old way — <AgentSidebarHeader> (active-tab cap) above a SEPARATE bg-on-background body — so they kept the 1px header↔body seam even though the header now supports windowBodyHeight. Both now measure the body container's height (ResizeObserver) and pass windowBodyHeight to the header, and strip the body's bg-on-background + rounded-2xl so the single Notch window shape shows through. The three full-window stories (EmptyState, EmptyStateNoLogo, Playground) share one new WindowFrame helper instead of each hand-rolling the assembly. Every platform app renders the agent window through AppShell, so this is what removes the seam everywhere — not just where windowBodyHeight is set by hand. AgentSidebarInput's root is transparent, so nothing re-covers the shape at the window bottom. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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.
What
The agent sidebar's header tab and message body were two separate cream fills (
var(--color-on-background)) meeting edge-to-edge. On fractional-DPI displays (Windows display scaling) that shared edge aliased into a 1px seam — invisible on integer-DPR / retina.This makes the window one shape. New
windowBodyHeightprop onAgentSidebarHeader: when set, the header draws the whole window as a single<Notch notchSide="bottom">— the rounded body with the active tab notched out of its top edge, filled once — and skips its separateheadOnlytab cap. The consumer passes its measured body height and gives the body a transparent background. With no internal edge between header and body, the seam cannot exist on any DPI.Also realigns the history ("previous conversations") dropdown notch 2px left (
left:4→2) after a prior Notch border shift.Notes
windowBodyHeight, the header draws the originalheadOnlytab cap unchanged. Shared notch appearance is hoisted into oneTAB_NOTCH_BASEobject spread by both branches.0.5.13 → 0.5.14(+releaselabel).AgentSidebarWindowwrapper (collapsing this prop + the height round-trip). Deferred — it's a new component + AppShell refactor beyond this seam fix.Test
tsc --noEmitclean; Notch (8) + AgentSidebar (43) tests pass.🤖 Generated with Claude Code