Agentic UI: Bring back the dark app frame around the content area#4233
Agentic UI: Bring back the dark app frame around the content area#4233bcotrim wants to merge 2 commits into
Conversation
…the-frame # Conflicts: # apps/ui/src/components/sidebar-layout/index.tsx
📊 Performance Test ResultsComparing 27b6702 vs trunk app-size
site-editor
site-startup
Results are median values from multiple test runs. Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff) |
| }: PreviewSplitFrameProps ) { | ||
| const showPreview = previewOpen && preview != null; | ||
| const { rootRef, contentWidthVar, isResizing, handleProps } = usePreviewSplit( { showPreview } ); | ||
| // The inset frame reads as chrome that belongs with the sidebar; when the |
There was a problem hiding this comment.
This comment can probably be dropped: the class name rootFrameless + the CSS already seem to explain this
| --panel-frame-gap: 12px; | ||
| --panel-frame-radius: 10px; | ||
|
|
||
| /* Border-box so the 1px frame border stays inside the calculated height — |
There was a problem hiding this comment.
Also seems to be a standard box-sizing explanation
| hard stroke — especially against dark page content in the preview. */ | ||
| border: 1px solid rgb(255 255 255 / 18%); | ||
| border-radius: var(--panel-frame-radius); | ||
| /* Ease in/out of the frameless state alongside the sidebar's 150ms |
There was a problem hiding this comment.
The property is self-explanatory so I would drop this as well
| overflow: auto; | ||
| position: relative; | ||
| isolation: isolate; | ||
| /* Continues the chrome canvas into the inset-frame gaps around the |
There was a problem hiding this comment.
I think that background-color + drag region are self-evident so I would drop this comment as well
katinthehatsite
left a comment
katinthehatsite
left a comment
There was a problem hiding this comment.
I noticed two small issues but they can be solved outside of this PR.
- there is no padding on the right on the action picker so it looks too close to the border:
- the screen to add a site has no drag zones:
I also left some comments regarding cleaning up self-explanatory comments. Otherwise, I think the changes are good to go so I will approve them
3 participants
Related issues
How AI was used in this PR
Implemented with Claude Code using the #3975 design preview as reference: it cherry-picked the frame treatment onto trunk, adapted it to the site-centric sidebar (#4191), and updated the tests. Code reviewed and visually verified by me.
Proposed Changes
The Agentic UI currently renders as a single flat surface — the sidebar and main content sit side by side with no visual hierarchy between app chrome and content, which makes it feel like a different app rather than an evolution of Studio.
This brings back "the frame" from the classic Studio UI:
Testing Instructions
npm start).Pre-merge Checklist