Repository navigation
fix(frontend): visual regressions from the package extraction - #6177
Conversation
Three surfaces the #6065 extraction changed, restored to their v0.112.3 look. Home rail cards (PanelSection). v0.112.3's StripHome carried `[&_.ag-panel-section]:bg-[var(--ag-surface-paper)]` on the rail wrapper, with `dark:` restoring colorBgElevated. The merge that brought the rail under HomeOverview dropped it, so the cards fell back to colorBgElevated — plain white in light mode — and read as white boxes on the warm page. The tint now lives in PanelSection's rail variant, which is the one place the frame, the header and the body are all stated: 0.113 gave the body its own background, so restoring only the old two selectors would have left the card body white. Playground dividers (split-pane). The extracted SplitPane says it ports `.playground-splitter-agent`, but that CSS sets `flex-basis: 0; width: 0` — the panes sit FLUSH and the divider is painted on the seam. SplitPane instead gave the bar a 9px `--ag-surface-gutter` channel and thinned the hairline from 2px colorBorderSecondary to 1px colorFillQuaternary. The channel is why the two seams stopped matching each other: the same band reads differently against the config pane than against the chat canvas. Bar width goes back to 0 with a 12px invisible hit target (antd's dragger width), and the hairline back to 2px. Generate API key button. The markup and the tokens are unchanged since v0.112.3 — DeploymentsDashboard is byte-identical — so this is not a lost prop. It is one of the last antd `type="primary"` buttons on a surface whose chrome is now a shadcn Sheet, so it mismatches the migrated primaries beside it. Moved to the package LoadingButton, in BOTH copies: web/ee shadows this file and EE's tsconfig resolves `@/oss/*` to the EE one first, so patching only OSS would change nothing in EE.
dosubot
Bot
added
the
size:M
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Mahmoud Mabrouk seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account. You have signed the CLA already but the status is still pending? Let us recheck it. |
|
Warning Review limit reached
Next review available in: 19 minutes Limit details: You’ve used all 8 included reviews currently available. You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?Wait for the limit to reset, then comment An organization admin can change what happens after included review limits in Billing. How do review limits work?CodeRabbit enforces per-developer PR review limits within each organization. For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Railway Preview Environment
Updated at 2026-08-21T19:05:32.098Z |
Context
Three desktop surfaces look wrong on v0.113.0 next to the shipped v0.112.3. Mahmoud found all three during release QA. Two are real losses from the package extraction (#6065); the third turns out not to be a regression at all, and the section on it says why it is still worth changing.
1. Home rail cards are white instead of the warm surface
On Home, the three cards on the right ("Your agents", "Next triggers", "Usage") paint plain white against the warm page background, so they read as three floating boxes rather than one rail.
v0.112.3 put the tint on the rail wrapper in
StripHome.tsx:with the note "The rail's cards carry the warm tinted surface rather than plain white, so they read as one object against the page."
In v0.113.0
StripHomerenders<HomeOverview>and no longer owns a rail div, and the rail wrapper in@agenta/home-uinever got the classes. The loss happened in6549aac263, the merge ofrelease/v0.112.1into the extraction lane, not in the extraction commit itself: the tint landed on the release line after the lane forked, and the resolution kept the lane'sHomeOverviewrail. The cards then fell back tobg-colorBgElevated, which is#ffffffin light mode. Dark mode was alwayscolorBgElevated, so this is light-mode only.The token is fine.
--ag-surface-paperstill resolves,#fbfaf8light and#272727dark.The fix puts the tint in
PanelSection's rail variant, which is the single place the card's three surfaces are stated. All three had to move together, because v0.113.0 gave the card body its own background. Restoring only the two selectors v0.112.3 had would have left the body white inside a paper frame.Doing it here rather than on
HomeOverviewalso repairs the agent overview rail, which lost the identical override inAgentOverviewBody.tsx.Measured on a live v0.113.0 build, all three slots of all three cards:
The main column's
variant="page"sections are untouched, and dark mode still resolves tocolorBgElevated.2. Playground dividers do not match each other
The seam between the settings pane and the chat looks different from the seam between the chat and the files pane, and both differ from v0.112.3.
packages/agenta-ui/src/components/ui/split-pane.tsxis a new file from the extraction. Its docstring says the divider is "ported from.playground-splitter-agentin globals.css", but that CSS says the opposite of what shipped:flex-basis: 0; width: 0, panes flushBAR_WIDTH = 9, painted with--ag-surface-gutter2px,--ag-colorBorderSecondary1px,colorFillQuaternary12pxdraggerTwo things follow.
colorFillQuaternaryis 2 to 4 percent alpha, so a 1px hairline painted on top of an opaque band is invisible; what you actually see as "the line" is the band's edges. And because the band is opaque, each seam takes its appearance from its neighbours: in light mode the gutter#f6f5f3is byte-identical to the app ground, so the settings seam swallows it, while the files seam sits against the white chat canvas and shows a clear grey stripe. In v0.112.3 the two matched by construction, andRightPanelSplit.tsxsaid so: "this divider renders EXACTLY like the config pane's, so all vertical seams match."Worth noting that
--ag-surface-gutterexisted in v0.112.3 with zero consumers. The extraction started painting a token nothing had ever painted.The fix restores the flush seam:
BAR_WIDTHgoes to 0, the gutter background goes away,overflow-hiddenbecomesoverflow-visible, the hairline goes back to 2pxcolorBorderSecondary, and a 12px invisible overlay carries the grab target the way antd's dragger did. The hairline and grip are now gated on!barHidden, which the old zero width plusoverflow-hiddenused to handle for free.All the geometry (
readTotal, the ResizeObserver, the pointer math, thearia-value*bounds) already reads the livebarWidth, so a zero-width bar flows through unchanged.3. "Generate API key" button, and why this one is not a regression
In Deployment, in the "How to use API" drawer, the button reads as the wrong colour.
I could not find a regression, and I looked hard.
DeploymentsDashboard/**is byte-identical to v0.112.3. InApiKeyInput.tsxthe only change is thatcreateApiKeymoved from@/oss/services/apiKeys/apito@agenta/settings; the JSX still says<Button type="primary" loading={...}>in both revisions. NoConfigProviderwas lost, the antd button tokens are not in the diff, antd is 6.3.7 in both lockfiles, and no global CSS reaches it.What actually changed is everything around it. This is one of the last antd-native
type="primary"buttons sitting on a surface whose chrome is now a shadcn Sheet, so it no longer matches the migrated primary actions beside it: different shadow, radius and height ramp, antd control geometry against thecontrol-*scale.So the fix is the migration the rest of the app already had:
LoadingButtonfrom@agenta/ui/ui, which is the documented mapping fortype="primary".Both copies had to change.
web/ee/tsconfig.jsonmaps"@/oss/*"to["./src/*", "../oss/src/*"], so the dynamic import inUseApiContent.tsxresolves to the EEApiKeyInputinside the EE app. Patching only the OSS file would have changed nothing on staging.Tests
@agenta/uiunit tests: 85/85 across 12 files, includingSplitPaneSingleMount.render.test.tsx.tsc --noEmitclean for@agenta/ossand@agenta/ee;pnpm turbo run build --filter=@agenta/uiclean.pnpm lint-fixinweb/: 25/25. Prettier 3.7.4 clean on all four files.@agenta/ossproduction build.aria-valuenow440 to 400, and the keyboard path still works (ArrowLeft 400 to 336, ArrowRight to 368, Home to 300, End to 440).What to QA
PanelSectionis shared, so glance at the agent overview rail (/apps/<id>/overview) and at Agents and Sessions. Their cards should look the same as Home's, not white.