feat: render Settings in a windowed dialog

- Open Settings as a centered windowed dialog on desktop with a blurred backdrop
- Update SettingsView to support windowed mode and adjust Mac titlebar padding for windowed use
- Export SettingsWindow and switch MainLayout to use it instead of full-screen overlay

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

@@ -15,7 +15,7 @@ import { useDeviceInfo } from '@/lib/device';
 import { useEdgeSwipe } from '@/hooks/useEdgeSwipe';
 import { cn } from '@/lib/utils';
 
-import { ChatView, PlanView, GitView, DiffView, TerminalView, FilesView, SettingsView } from '@/components/views';
+import { ChatView, PlanView, GitView, DiffView, TerminalView, FilesView, SettingsView, SettingsWindow } from '@/components/views';
 
 export const MainLayout: React.FC = () => {
     const {
@@ -301,7 +301,6 @@ export const MainLayout: React.FC = () => {
     }, [activeMainTab]);
 
     const isChatActive = activeMainTab === 'chat';
-    const isSettingsActive = isSettingsDialogOpen && !isMobile;
 
     return (
         <DiffWorkerProvider>
@@ -371,7 +370,7 @@ export const MainLayout: React.FC = () => {
                     {/* Desktop: Header always on top, then Sidebar + Content below */}
                     <div className="flex flex-1 flex-col overflow-hidden relative">
                         {/* Normal view: Header above Sidebar + content (like SettingsView) */}
-                        <div className={cn('absolute inset-0 flex flex-col', (isSettingsActive || isMultiRunLauncherOpen) && 'invisible')}>
+                        <div className={cn('absolute inset-0 flex flex-col', isMultiRunLauncherOpen && 'invisible')}>
                             <Header />
                             <div className="flex flex-1 overflow-hidden">
                                 <Sidebar isOpen={isSidebarOpen} isMobile={isMobile}>
@@ -404,12 +403,11 @@ export const MainLayout: React.FC = () => {
                         )}
                     </div>
 
-                    {/* Settings view: full screen overlay */}
+                    {/* Desktop settings: windowed dialog with blur */}
-                    {isSettingsActive && (
+                    <SettingsWindow
-                        <div className={cn('absolute inset-0 z-10 bg-background')}>
+                        open={isSettingsDialogOpen}
-                            <ErrorBoundary><SettingsView onClose={() => setSettingsDialogOpen(false)} /></ErrorBoundary>
+                        onOpenChange={setSettingsDialogOpen}
-                        </div>
+                    />
-                    )}
                 </>
             )}
 

packages/ui/src/components/ui/ScrollableOverlay.tsx

@@ -11,6 +11,8 @@ type ScrollableOverlayProps = React.HTMLAttributes<HTMLElement> & {
   disableHorizontal?: boolean;
   fillContainer?: boolean;
   keyboardAvoid?: boolean;
+  /** Prevent scroll from propagating to parent when at boundaries */
+  preventOverscroll?: boolean;
 };
 
 export const ScrollableOverlay = React.forwardRef<HTMLElement, ScrollableOverlayProps>(
@@ -26,6 +28,7 @@ export const ScrollableOverlay = React.forwardRef<HTMLElement, ScrollableOverlay
     disableHorizontal = false,
     fillContainer = true,
     keyboardAvoid = false,
+    preventOverscroll = false,
     ...rest
   }, ref) => {
     const containerRef = React.useRef<HTMLElement | null>(null);
@@ -34,13 +37,18 @@ export const ScrollableOverlay = React.forwardRef<HTMLElement, ScrollableOverlay
 
     return (
       <div
-        className={cn("relative flex flex-col min-h-0 w-full overflow-hidden overscroll-none", outerClassName)}
+        className={cn(
+          "relative flex flex-col min-h-0 w-full overflow-hidden",
+          preventOverscroll && "overscroll-none",
+          outerClassName
+        )}
         data-keyboard-avoid={keyboardAvoid ? "true" : undefined}
       >
         <Component
           ref={containerRef as React.Ref<HTMLElement>}
           className={cn(
-            "overlay-scrollbar-target overlay-scrollbar-container overscroll-none",
+            "overlay-scrollbar-target overlay-scrollbar-container",
+            preventOverscroll && "overscroll-none",
             fillContainer ? "flex-1 min-h-0 w-full" : "flex-none w-full h-auto",
             disableHorizontal ? "overflow-y-auto overflow-x-hidden" : "overflow-auto",
             className

packages/ui/src/components/views/SettingsView.tsx

@@ -52,15 +52,17 @@ const SETTINGS_SIDEBAR_MAX_WIDTH = 500;
 const SETTINGS_SIDEBAR_DEFAULT_WIDTH = 264;
 
 // Width threshold for hiding tab labels (show icons only)
-const TAB_LABELS_MIN_WIDTH = 940;
+const TAB_LABELS_MIN_WIDTH = 1024;
 
 interface SettingsViewProps {
   onClose?: () => void;
   /** Force mobile layout regardless of device detection */
   forceMobile?: boolean;
+  /** Rendered inside a window/dialog (skip traffic light padding) */
+  isWindowed?: boolean;
 }
 
-export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile }) => {
+export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile, isWindowed }) => {
   const deviceInfo = useDeviceInfo();
   const isMobile = forceMobile ?? deviceInfo.isMobile;
 
@@ -342,13 +344,16 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
   // Keyboard shortcut display based on platform
   const shortcutKey = getModifierLabel();
 
-  // Desktop padding for Mac titlebar area
+  // Desktop padding for Mac titlebar area (only when full-screen, not windowed)
   const desktopPaddingClass = React.useMemo(() => {
+    if (isWindowed) {
+      return 'pl-1.5'; // Balanced padding for windowed mode
+    }
     if (isDesktopApp && isMacPlatform) {
       return 'pl-[5.75rem]'; // Space for traffic lights
     }
     return '';
-  }, [isDesktopApp, isMacPlatform]);
+  }, [isDesktopApp, isMacPlatform, isWindowed]);
 
 
   return (

packages/ui/src/components/views/SettingsWindow.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cn } from '@/lib/utils';
+import { SettingsView } from './SettingsView';
+
+interface SettingsWindowProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+/**
+ * Settings rendered as a centered window with blurred backdrop.
+ * Used for desktop and web (non-mobile) environments.
+ */
+export const SettingsWindow: React.FC<SettingsWindowProps> = ({ open, onOpenChange }) => {
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay
+          className="fixed inset-0 z-50 bg-black/50 backdrop-blur-md"
+        />
+        <DialogPrimitive.Content
+          className={cn(
+            'fixed z-50 top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]',
+            'w-[90vw] max-w-[1200px] h-[85vh] max-h-[900px]',
+            'rounded-xl border shadow-2xl overflow-hidden',
+            'bg-background'
+          )}
+        >
+          <SettingsView onClose={() => onOpenChange(false)} isWindowed />
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+};

packages/ui/src/components/views/index.ts

@@ -5,3 +5,4 @@ export { DiffView, useDiffFileCount } from './DiffView';
 export { TerminalView } from './TerminalView';
 export { FilesView } from './FilesView';
 export { SettingsView } from './SettingsView';
+export { SettingsWindow } from './SettingsWindow';