ui(agents): light-theme overlays + draggable top strip

src/renderer/components/ui/context-menu.tsx

@@ -48,26 +48,36 @@ ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 
 const ContextMenuSubContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> & {
+    forceDark?: boolean
+  }
+>(({ className, forceDark = false, ...props }, ref) => (
   <ContextMenuPrimitive.SubContent
     ref={ref}
-    className={cn(overlayContent, "min-w-[200px] py-1 dark", className)}
+    className={cn(
+      overlayContent,
+      "min-w-[200px] py-1",
+      forceDark && "dark",
+      className,
+    )}
     {...props}
   />
 ))
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 
 const ContextMenuContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & {
+    forceDark?: boolean
+  }
+>(({ className, forceDark = false, ...props }, ref) => (
   <ContextMenuPrimitive.Portal>
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
         overlayContent,
-        "min-w-[200px] py-1 dark",
+        "min-w-[200px] py-1",
+        forceDark && "dark",
         className,
       )}
       {...props}

src/renderer/components/ui/dropdown-menu.tsx

@@ -47,11 +47,18 @@ DropdownMenuSubTrigger.displayName =
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+    forceDark?: boolean
+  }
+>(({ className, forceDark = false, ...props }, ref) => (
   <DropdownMenuPrimitive.SubContent
     ref={ref}
-    className={cn(overlayContent, "min-w-[8rem] py-1 dark", className)}
+    className={cn(
+      overlayContent,
+      "min-w-[8rem] py-1",
+      forceDark && "dark",
+      className,
+    )}
     {...props}
   />
 ))
@@ -60,13 +67,20 @@ DropdownMenuSubContent.displayName =
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    forceDark?: boolean
+  }
+>(({ className, sideOffset = 4, forceDark = false, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
-      className={cn(overlayContent, "min-w-[8rem] py-1 dark", className)}
+      className={cn(
+        overlayContent,
+        "min-w-[8rem] py-1",
+        forceDark && "dark",
+        className,
+      )}
       data-dropdown="true"
       {...props}
     />

src/renderer/components/ui/popover.tsx

@@ -22,7 +22,7 @@ const PopoverContent = React.forwardRef<
   }
 >(
   (
-    { className, align = "center", sideOffset = 4, forceDark = true, ...props },
+    { className, align = "center", sideOffset = 4, forceDark = false, ...props },
     ref,
   ) => (
     <PopoverPrimitive.Portal>

src/renderer/components/ui/select.tsx

@@ -98,8 +98,10 @@ SelectScrollDownButton.displayName =
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+    forceDark?: boolean
+  }
+>(({ className, children, position = "popper", forceDark = false, ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
@@ -108,7 +110,8 @@ const SelectContent = React.forwardRef<
         overlayMaxHeight,
         overlayAnimation,
         overlaySlideIn,
-        "dark relative",
+        "relative",
+        forceDark && "dark",
         position === "popper" &&
           "min-w-[var(--radix-select-trigger-width)] data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,

src/renderer/features/agents/main/new-chat-form.tsx

@@ -1699,6 +1699,10 @@ export function NewChatForm({
               onClick={onBackToChats}
               className="h-7 w-7 p-0 hover:bg-foreground/10 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] flex-shrink-0 rounded-md"
               aria-label="All projects"
+              style={{
+                // @ts-expect-error - WebKit-specific property
+                WebkitAppRegion: "no-drag",
+              }}
             >
               <AlignJustify className="h-4 w-4" />
             </Button>

src/renderer/features/agents/ui/agents-header-controls.tsx

@@ -39,6 +39,10 @@ export function AgentsHeaderControls({
             onClick={onToggleSidebar}
             className="h-6 w-6 p-0 hover:bg-foreground/10 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] text-foreground flex-shrink-0 rounded-md relative"
             aria-label="Open sidebar"
+            style={{
+              // @ts-expect-error - WebKit-specific property
+              WebkitAppRegion: "no-drag",
+            }}
           >
             <AlignJustify className="h-4 w-4" />
             {/* Unseen changes indicator */}

src/renderer/features/agents/ui/archive-popover.tsx

@@ -508,7 +508,6 @@ export const ArchivePopover = memo(function ArchivePopover({ trigger }: ArchiveP
         side="right"
         align="end"
         sideOffset={8}
-        forceDark={false}
         className="w-[250px] h-[400px] p-0 flex flex-col overflow-hidden"
         onKeyDown={handleKeyDown}
         tabIndex={-1}

src/renderer/features/agents/ui/sub-chat-selector.tsx

@@ -679,10 +679,6 @@ export function SubChatSelector({
 
       <div
         className="relative flex-1 min-w-0 flex items-center"
-        style={{
-          // @ts-expect-error - WebKit-specific property
-          WebkitAppRegion: "no-drag",
-        }}
       >
         {/* Left gradient - visibility controlled via ref */}
         <div
@@ -773,6 +769,10 @@ export function SubChatSelector({
                           isInSplitPair && hasSplitPrev && "-ml-1 rounded-l-none",
                           isInSplitPair && hasSplitNext && "rounded-r-none",
                         )}
+                        style={{
+                          // @ts-expect-error - WebKit-specific property
+                          WebkitAppRegion: "no-drag",
+                        }}
                       >
                         {/* Icon: question icon (priority) OR loading spinner OR mode icon with badge (hide when editing) */}
                         {editingSubChatId !== subChat.id && (
@@ -914,7 +914,13 @@ export function SubChatSelector({
 
         {/* Plus button - absolute positioned on right with gradient cover */}
         {(isMobile || (!isMobile && subChatsSidebarMode === "tabs")) && (
-          <div className="absolute right-0 top-0 bottom-0 flex items-center z-20">
+          <div
+            className="absolute right-0 top-0 bottom-0 flex items-center z-20"
+            style={{
+              // @ts-expect-error - WebKit-specific property
+              WebkitAppRegion: "no-drag",
+            }}
+          >
             {/* Gradient to cover content peeking from the left */}
             <div className="w-6 h-full bg-gradient-to-r from-transparent to-background" />
             <div className="h-full flex items-center bg-background pr-1">

src/renderer/features/automations/automations-detail-view.tsx

@@ -411,11 +411,21 @@ export function AutomationsDetailView() {
         <button
           onClick={handleBack}
           className="h-7 w-7 p-0 flex items-center justify-center hover:bg-foreground/10 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] rounded-md text-muted-foreground hover:text-foreground"
+          style={{
+            // @ts-expect-error - WebKit-specific property
+            WebkitAppRegion: "no-drag",
+          }}
         >
           <ArrowLeft className="h-4 w-4" />
         </button>
 
-        <div className="flex items-center gap-2">
+        <div
+          className="flex items-center gap-2"
+          style={{
+            // @ts-expect-error - WebKit-specific property
+            WebkitAppRegion: "no-drag",
+          }}
+        >
           {!isCreateMode && (
             <>
               <DropdownMenu>

src/renderer/features/automations/automations-view.tsx

@@ -136,6 +136,10 @@ export function AutomationsView() {
                   onClick={handleSidebarToggle}
                   className="h-7 w-7 p-0 flex items-center justify-center hover:bg-foreground/10 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] flex-shrink-0 rounded-md text-muted-foreground hover:text-foreground"
                   aria-label={isMobile ? "Back to chats" : "Open sidebar"}
+                  style={{
+                    // @ts-expect-error - WebKit-specific property
+                    WebkitAppRegion: "no-drag",
+                  }}
                 >
                   <AlignJustify className="h-4 w-4" />
                 </button>
@@ -150,6 +154,10 @@ export function AutomationsView() {
             <button
               onClick={handleNewAutomation}
               className="h-8 px-3 rounded-lg text-sm font-medium border border-border hover:bg-foreground/10 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] text-foreground flex items-center gap-1.5 flex-shrink-0"
+              style={{
+                // @ts-expect-error - WebKit-specific property
+                WebkitAppRegion: "no-drag",
+              }}
             >
               <Plus className="h-4 w-4" />
               <span className="text-sm font-medium hidden min-420:inline">New</span>

src/renderer/features/automations/inbox-view.tsx

@@ -540,7 +540,13 @@ export function InboxView() {
             {/* Mobile Header */}
             <div className="flex-shrink-0 border-b bg-background">
               <div className="h-14 flex items-center justify-between px-4">
-                <div className="flex items-center gap-2">
+                <div
+                  className="flex items-center gap-2"
+                  style={{
+                    // @ts-expect-error - WebKit-specific property
+                    WebkitAppRegion: "no-drag",
+                  }}
+                >
                   <button
                     onClick={handleMobileBackToChats}
                     className="h-7 w-7 p-0 flex items-center justify-center hover:bg-foreground/10 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] flex-shrink-0 rounded-md text-muted-foreground hover:text-foreground"
@@ -550,7 +556,13 @@ export function InboxView() {
                   </button>
                   <h1 className="text-lg font-semibold">Inbox</h1>
                 </div>
-                <div className="flex items-center gap-1">
+                <div
+                  className="flex items-center gap-1"
+                  style={{
+                    // @ts-expect-error - WebKit-specific property
+                    WebkitAppRegion: "no-drag",
+                  }}
+                >
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
                         <button className="flex items-center justify-center h-8 w-8 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors">

src/renderer/features/layout/agents-layout.tsx

@@ -335,7 +335,17 @@ export function AgentsLayout() {
         </ResizableSidebar>
 
           {/* Main Content */}
-          <div className="flex-1 overflow-hidden flex flex-col min-w-0">
+          <div className="relative flex-1 overflow-hidden flex flex-col min-w-0">
+            {/* Draggable strip for window movement (hidden in fullscreen, handled by WindowsTitleBar on Windows) */}
+            {isDesktop && !isFullscreen && (
+              <div
+                className="absolute inset-x-0 top-0 h-[32px] z-0"
+                style={{
+                  // @ts-expect-error - WebKit-specific property
+                  WebkitAppRegion: "drag",
+                }}
+              />
+            )}
             <AgentsContent />
           </div>
         </div>