feat: implement window controls overlay layout and styles (#1001)

packages/ui/src/components/layout/Header.tsx

@@ -1356,6 +1356,19 @@ export const Header: React.FC<HeaderProps> = ({
     return '';
   }, [isDesktopApp, isMacPlatform, macosMajorVersion]);
 
+  const webWindowControlsOverlayStyle = React.useMemo<React.CSSProperties | undefined>(() => {
+    if (isDesktopApp || isVSCode) {
+      return undefined;
+    }
+
+    return {
+      paddingLeft: 'calc(0.75rem + var(--oc-wco-left-inset, 0px))',
+      paddingRight: 'calc(0.75rem + var(--oc-wco-right-inset, 0px))',
+      minHeight: 'max(3rem, var(--oc-wco-titlebar-height, 0px))',
+      height: 'max(3rem, var(--oc-wco-titlebar-height, 0px))',
+    };
+  }, [isDesktopApp, isVSCode]);
+
   const updateHeaderHeight = React.useCallback(() => {
     if (typeof document === 'undefined') {
       return;
@@ -1694,6 +1707,7 @@ export const Header: React.FC<HeaderProps> = ({
         desktopPaddingClass,
         macosHeaderSizeClass
       )}
+      style={webWindowControlsOverlayStyle}
       role="tablist"
       aria-label="Main navigation"
     >

packages/ui/src/components/layout/RightSidebar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { cn } from '@/lib/utils';
 import { useUIStore } from '@/stores/useUIStore';
-import { isDesktopShell, startDesktopWindowDrag } from '@/lib/desktop';
+import { isDesktopShell, isVSCodeRuntime, startDesktopWindowDrag } from '@/lib/desktop';
 
 export const RIGHT_SIDEBAR_CONTENT_WIDTH = 420;
 const RIGHT_SIDEBAR_MIN_WIDTH = 400;
@@ -18,6 +18,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, cl
   const rightSidebarWidth = useUIStore((state) => state.rightSidebarWidth);
   const setRightSidebarWidth = useUIStore((state) => state.setRightSidebarWidth);
   const isDesktopApp = React.useMemo(() => isDesktopShell(), []);
+  const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
   const [isResizing, setIsResizing] = React.useState(false);
   const startXRef = React.useRef(0);
   const startWidthRef = React.useRef(rightSidebarWidth || 420);
@@ -126,6 +127,17 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, cl
     await startDesktopWindowDrag();
   }, [isDesktopApp]);
 
+  const webWindowControlsOverlayStyle = React.useMemo<React.CSSProperties | undefined>(() => {
+    if (isDesktopApp || isVSCode) {
+      return undefined;
+    }
+
+    return {
+      paddingLeft: 'calc(0.75rem + var(--oc-wco-left-inset, 0px))',
+      paddingRight: 'calc(0.75rem + var(--oc-wco-right-inset, 0px))',
+    };
+  }, [isDesktopApp, isVSCode]);
+
   return (
     <aside
       ref={sidebarRef}
@@ -149,6 +161,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, cl
         <div
           onMouseDown={handleDragStart}
           className="app-region-drag absolute inset-x-0 top-0 z-20 flex h-[var(--oc-header-height,56px)] items-center justify-end px-3"
+          style={webWindowControlsOverlayStyle}
           aria-hidden
         >
           <div