refactor(ui): full-width header with framed chat shell

Header now spans the full window width above the [sidebar | chat | right-sidebar] row instead of nesting inside the central column. The chat area becomes a self-contained framed window with its own border and rounded corners on all four sides, and sidebars sit flush against the header sharing its bg-sidebar so the seam is invisible.

Removed the duplicated shell controls the old layout needed to fake header-height inside sidebars: portal host on RightSidebar, paddingTop reservation, top drag overlay, duplicated layout-left / chat-new buttons in SidebarHeader, the showDesktopSidebarChrome block in SessionSidebar, and the conditional traffic-lights inset on the desktop header. Mac WCO inset now lives only on the header.

Moved the new-session action into the SessionSwitcher dropdown as its first item, removed the standalone chat-new button from the header, relocated scheduled-tasks into the left action group of the sidebar header, and bumped ContextPanel tab strip to h-10 to balance the more prominent header.

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

@@ -1828,7 +1828,7 @@ export const ContextPanel: React.FC = () => {
   const isFileTabActive = activeTab?.mode === 'file';
 
   const header = (
-    <header className="flex h-8 items-stretch border-b border-transparent">
+    <header className="flex h-10 items-stretch border-b border-transparent">
       <SortableTabsStrip
         items={tabItems}
         activeId={activeTab?.id ?? null}

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

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import { createPortal } from 'react-dom';
 import {
   Tooltip,
   TooltipContent,
@@ -646,7 +645,6 @@ interface HeaderProps {
   onToggleRightDrawer?: () => void;
   leftDrawerOpen?: boolean;
   rightDrawerOpen?: boolean;
-  desktopRightSidebarActionsHost?: HTMLElement | null;
 }
 
 export const Header: React.FC<HeaderProps> = ({
@@ -654,13 +652,10 @@ export const Header: React.FC<HeaderProps> = ({
   onToggleRightDrawer,
   leftDrawerOpen,
   rightDrawerOpen,
-  desktopRightSidebarActionsHost = null,
 }) => {
   const { t } = useI18n();
   const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
   const toggleSidebar = useUIStore((state) => state.toggleSidebar);
-  const isSidebarOpen = useUIStore((state) => state.isSidebarOpen);
-  const isRightSidebarOpen = useUIStore((state) => state.isRightSidebarOpen);
   const toggleBottomTerminal = useUIStore((state) => state.toggleBottomTerminal);
   const toggleRightSidebar = useUIStore((state) => state.toggleRightSidebar);
   const openContextOverview = useUIStore((state) => state.openContextOverview);
@@ -677,7 +672,6 @@ export const Header: React.FC<HeaderProps> = ({
   const [isDevShutdownInFlight, setIsDevShutdownInFlight] = React.useState(false);
 
   const getContextUsage = useSessionUIStore((state) => state.getContextUsage);
-  const openNewSessionDraft = useSessionUIStore((state) => state.openNewSessionDraft);
   const isNewSessionDraftOpen = useSessionUIStore((state) => Boolean(state.newSessionDraft?.open));
   const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
   const currentSessionMessagesResolved = useSessionMessagesResolved(currentSessionId ?? '');
@@ -815,15 +809,6 @@ export const Header: React.FC<HeaderProps> = ({
   }, [desktopServicesTab, isDesktopApp]);
 
   const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
-  const isLeftSidebarOpen = React.useMemo(() => {
-    if (!isMobile) {
-      return isSidebarOpen;
-    }
-    if (typeof onToggleLeftDrawer === 'function') {
-      return Boolean(leftDrawerOpen);
-    }
-    return isSessionSwitcherOpen;
-  }, [isMobile, isSessionSwitcherOpen, isSidebarOpen, leftDrawerOpen, onToggleLeftDrawer]);
   const showDesktopHeaderContextUsage = !isVSCode && activeMainTab === 'chat' && !!stableDesktopContextUsage && stableDesktopContextUsage.totalTokens > 0;
   const desktopHeaderDisplayPercentage = stableDesktopContextUsage && stableDesktopContextUsage.contextLimit > 0
     ? Math.min(999, (stableDesktopContextUsage.totalTokens / stableDesktopContextUsage.contextLimit) * 100)
@@ -1275,12 +1260,6 @@ export const Header: React.FC<HeaderProps> = ({
     toggleSidebar();
   }, [blurActiveElement, isMobile, isSessionSwitcherOpen, setSessionSwitcherOpen, toggleSidebar]);
 
-  const handleHeaderNewSession = React.useCallback(() => {
-    setActiveMainTab('chat');
-    setSessionSwitcherOpen(false);
-    openNewSessionDraft();
-  }, [openNewSessionDraft, setActiveMainTab, setSessionSwitcherOpen]);
-
   const handleOpenDraftMiniChat = React.useCallback(() => {
     void invokeDesktop('desktop_open_draft_mini_chat_window', {
       directory: normalize(openDirectory || activeProject?.path || ''),
@@ -1367,11 +1346,11 @@ export const Header: React.FC<HeaderProps> = ({
   const mobileHeaderIconButtonClass = MOBILE_HEADER_ICON_BUTTON_CLASS;
 
   const desktopPaddingClass = React.useMemo(() => {
-    if (!isSidebarOpen && ((isDesktopApp && isMacPlatform && !isDesktopWindowFullscreen) || isTabletStandalonePwa)) {
+    if ((isDesktopApp && isMacPlatform && !isDesktopWindowFullscreen) || isTabletStandalonePwa) {
       return 'pl-[5.5rem]';
     }
     return 'pl-3';
-  }, [isDesktopApp, isDesktopWindowFullscreen, isMacPlatform, isSidebarOpen, isTabletStandalonePwa]);
+  }, [isDesktopApp, isDesktopWindowFullscreen, isMacPlatform, isTabletStandalonePwa]);
 
   useEffect(() => {
     if (!isDesktopApp || !isMacPlatform) {
@@ -1439,14 +1418,14 @@ export const Header: React.FC<HeaderProps> = ({
     }
 
     return {
-      paddingLeft: isTabletStandalonePwa && !isSidebarOpen
+      paddingLeft: isTabletStandalonePwa
         ? 'max(calc(0.75rem + var(--oc-wco-left-inset, 0px)), 5.5rem)'
         : '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, isSidebarOpen, isTabletStandalonePwa, isVSCode]);
+  }, [isDesktopApp, isTabletStandalonePwa, isVSCode]);
 
   const updateHeaderHeight = React.useCallback(() => {
     if (typeof document === 'undefined') {
@@ -1844,7 +1823,6 @@ export const Header: React.FC<HeaderProps> = ({
     </>
   );
 
-  const desktopSidebarActionsInline = !isRightSidebarOpen || !desktopRightSidebarActionsHost;
   const showMiniChatHeaderAction = hasElectronDesktopIPC && (isNewSessionDraftOpen || Boolean(currentSessionId));
 
   const renderDesktop = () => (
@@ -1860,7 +1838,6 @@ export const Header: React.FC<HeaderProps> = ({
       aria-label={t('header.navigation.mainAria')}
     >
       <HeaderIconActionButton
-        visible={!isSidebarOpen}
         title={t('header.actions.openSessionsWithShortcut', { shortcut: shortcutLabel('toggle_sidebar') })}
         ariaLabel={t('header.actions.openSessionsAria')}
         onClick={handleOpenSessionSwitcher}
@@ -1868,24 +1845,7 @@ export const Header: React.FC<HeaderProps> = ({
         Icon={'layout-left'}
       />
 
-      <div className={cn('flex min-w-0 flex-1 items-center', !isSidebarOpen && 'pl-3')}>
+      <div className="flex min-w-0 flex-1 items-center pl-3">
-        {!isLeftSidebarOpen ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                aria-label={t('header.actions.newSessionAria')}
-                onClick={handleHeaderNewSession}
-                className={cn(desktopHeaderIconButtonClass, 'mr-6 shrink-0')}
-              >
-                <Icon name="chat-new" className="h-[18px] w-[18px]" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{t('header.actions.newSessionWithShortcut', { shortcut: shortcutLabel('new_chat') })}</p>
-            </TooltipContent>
-          </Tooltip>
-        ) : null}
         {projectActionsContext && (
           <ProjectActionsButton
             projectRef={projectActionsContext.projectRef}
@@ -1953,7 +1913,7 @@ export const Header: React.FC<HeaderProps> = ({
               showPercentIcon
               onClick={handleOpenContextPanel}
               pressed={isContextPanelActive}
-              className={desktopSidebarActionsInline && !showMiniChatHeaderAction ? 'mr-3.5' : ''}
+              className={!showMiniChatHeaderAction ? 'mr-3.5' : ''}
               valueClassName="typography-ui-label font-medium leading-none text-foreground"
               percentIconClassName="h-5 w-5"
             />
@@ -1963,13 +1923,10 @@ export const Header: React.FC<HeaderProps> = ({
             title={isNewSessionDraftOpen ? t('header.actions.newMiniChat') : t('header.actions.openSessionMiniChat')}
             ariaLabel={isNewSessionDraftOpen ? t('header.actions.newMiniChatAria') : t('header.actions.openSessionMiniChatAria')}
             onClick={handleOpenCurrentMiniChat}
-            className={cn(desktopHeaderIconButtonClass, desktopSidebarActionsInline && showDesktopHeaderContextUsage ? 'mr-3.5' : 'mr-1')}
+            className={cn(desktopHeaderIconButtonClass, showDesktopHeaderContextUsage ? 'mr-3.5' : 'mr-1')}
             Icon={'picture-in-picture-2'}
           />
-          {desktopSidebarActionsInline ? desktopSidebarActions : null}
+          {desktopSidebarActions}
-          {!desktopSidebarActionsInline && desktopRightSidebarActionsHost
-            ? createPortal(desktopSidebarActions, desktopRightSidebarActionsHost)
-            : null}
         </div>
       </div>
     </div>
@@ -2386,8 +2343,7 @@ export const Header: React.FC<HeaderProps> = ({
 
   const headerClassName = cn(
     'header-safe-area relative z-10',
-    isMobile && 'border-b border-border/50',
+    isMobile ? 'border-b border-border/50 bg-background' : 'bg-sidebar'
-    'bg-background'
   );
 
   return (

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

@@ -23,7 +23,6 @@ import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
 import { useVisualViewport } from '@/hooks/useVisualViewport';
 import { useI18n } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
-import { isDesktopShell } from '@/lib/desktop';
 import { lazyWithChunkRecovery } from '@/lib/chunkLoadRecovery';
 
 import { ChatView } from '@/components/views/ChatView';
@@ -86,10 +85,8 @@ export const MainLayout: React.FC = () => {
 
     const { isMobile, isTablet } = useDeviceInfo();
     const visualViewport = useVisualViewport();
-    const isDesktopShellRuntime = React.useMemo(() => isDesktopShell(), []);
     const sidebarWidth = useUIStore((state) => state.sidebarWidth);
     const rightSidebarWidth = useUIStore((state) => state.rightSidebarWidth);
-    const [desktopRightSidebarActionsHost, setDesktopRightSidebarActionsHost] = React.useState<HTMLDivElement | null>(null);
     const effectiveDirectory = useEffectiveDirectory() ?? '';
     const directoryKey = React.useMemo(() => normalizeDirectoryKey(effectiveDirectory), [effectiveDirectory]);
     const isContextPanelOpen = useUIStore((state) => {
@@ -605,20 +602,15 @@ export const MainLayout: React.FC = () => {
                 </DrawerProvider>
             ) : (
                 <>
-                    {/* Desktop: Sidebar is a left column; header belongs to content column */}
+                    {/* Desktop: full-width Header above [Sidebar | chat-frame | RightSidebar] row */}
-                    <div className="flex flex-1 overflow-hidden relative">
+                    <div className="flex flex-1 flex-col overflow-hidden">
-                        <div className={cn(
+                        <Header />
-                            'absolute inset-0 flex overflow-hidden',
+                        <div className="relative flex flex-1 min-h-0 overflow-hidden bg-sidebar" data-page-scroll-lock="true">
-                            isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
-                        )} data-page-scroll-lock="true">
                             {isSidebarOpen ? (
                                 <>
                                     <div
                                         aria-hidden
-                                        className={cn(
+                                        className="pointer-events-none absolute top-0 z-0 bg-sidebar"
-                                            'pointer-events-none absolute top-0 z-0',
-                                            isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
-                                        )}
                                         style={{
                                             left: `${visibleSidebarWidth}px`,
                                             width: '10px',
@@ -629,10 +621,7 @@ export const MainLayout: React.FC = () => {
                                     />
                                     <div
                                         aria-hidden
-                                        className={cn(
+                                        className="pointer-events-none absolute bottom-0 z-0 bg-sidebar"
-                                            'pointer-events-none absolute bottom-0 z-0',
-                                            isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
-                                        )}
                                         style={{
                                             left: `${visibleSidebarWidth}px`,
                                             width: '10px',
@@ -647,10 +636,7 @@ export const MainLayout: React.FC = () => {
                                 <>
                                     <div
                                         aria-hidden
-                                        className={cn(
+                                        className="pointer-events-none absolute top-0 z-0 bg-sidebar"
-                                            'pointer-events-none absolute top-0 z-0',
-                                            isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
-                                        )}
                                         style={{
                                             right: `${visibleRightSidebarWidth}px`,
                                             width: '10px',
@@ -661,10 +647,7 @@ export const MainLayout: React.FC = () => {
                                     />
                                     <div
                                         aria-hidden
-                                        className={cn(
+                                        className="pointer-events-none absolute bottom-0 z-0 bg-sidebar"
-                                            'pointer-events-none absolute bottom-0 z-0',
-                                            isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
-                                        )}
                                         style={{
                                             right: `${visibleRightSidebarWidth}px`,
                                             width: '10px',
@@ -684,16 +667,12 @@ export const MainLayout: React.FC = () => {
                             </Sidebar>
                             <div className={cn(
                                 'relative flex flex-1 min-w-0 flex-col overflow-hidden',
-                                'bg-sidebar',
+                                'bg-background',
+                                'border-y border-border/50',
                                 isSidebarOpen && 'border-l border-border/50 rounded-tl-[10px] rounded-bl-[10px]',
                                 isRightSidebarOpen && 'border-r border-border/50 rounded-tr-[10px] rounded-br-[10px]'
                             )} data-page-scroll-lock="true">
-                                <Header desktopRightSidebarActionsHost={desktopRightSidebarActionsHost} />
+                                <div className="flex flex-1 min-h-0 overflow-hidden" data-page-scroll-lock="true">
-                                <div className={cn(
-                                    'flex flex-1 min-h-0 overflow-hidden',
-                                    isSidebarOpen || isChatActive ? '' : 'border-l border-border/50',
-                                    isRightSidebarOpen ? '' : 'border-r border-border/50'
-                                )} data-page-scroll-lock="true">
                                     <div className="relative flex flex-1 min-h-0 min-w-0 overflow-hidden" data-page-scroll-lock="true">
                                         <main className="flex-1 overflow-hidden bg-background relative" data-page-scroll-lock="true">
                                             <div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
@@ -721,12 +700,10 @@ export const MainLayout: React.FC = () => {
                             <RightSidebar
                                 isOpen={isRightSidebarOpen}
                                 className="border-0"
-                                onTopActionsHostChange={setDesktopRightSidebarActionsHost}
                             >
                                 <ErrorBoundary><RightSidebarTabs /></ErrorBoundary>
                             </RightSidebar>
                         </div>
-
                     </div>
 
                     {/* Desktop settings: windowed dialog with blur */}

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

@@ -2,8 +2,6 @@ import React from 'react';
 import { cn } from '@/lib/utils';
 import { useUIStore } from '@/stores/useUIStore';
 import { useI18n } from '@/lib/i18n';
-import { isDesktopShell, isVSCodeRuntime, startDesktopWindowDrag } from '@/lib/desktop';
-import { useTabletStandalonePwaRuntime } from '@/lib/device';
 
 export const RIGHT_SIDEBAR_CONTENT_WIDTH = 420;
 const RIGHT_SIDEBAR_MIN_WIDTH = 400;
@@ -13,16 +11,12 @@ interface RightSidebarProps {
   isOpen: boolean;
   children: React.ReactNode;
   className?: string;
-  onTopActionsHostChange?: (element: HTMLDivElement | null) => void;
 }
 
-export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, className, onTopActionsHostChange }) => {
+export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, className }) => {
   const { t } = useI18n();
   const rightSidebarWidth = useUIStore((state) => state.rightSidebarWidth);
   const setRightSidebarWidth = useUIStore((state) => state.setRightSidebarWidth);
-  const isDesktopApp = React.useMemo(() => isDesktopShell(), []);
-  const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
-  const isTabletStandalonePwa = useTabletStandalonePwaRuntime();
   const [isResizing, setIsResizing] = React.useState(false);
   const startXRef = React.useRef(0);
   const startWidthRef = React.useRef(rightSidebarWidth || 420);
@@ -107,42 +101,6 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, cl
     }
   }, [isResizing]);
 
-  React.useEffect(() => {
-    if (!isOpen) {
-      onTopActionsHostChange?.(null);
-    }
-  }, [isOpen, onTopActionsHostChange]);
-
-  const handleDragStart = React.useCallback(async (event: React.MouseEvent) => {
-    const target = event.target as HTMLElement;
-    if (target.closest('.app-region-no-drag')) {
-      return;
-    }
-    if (target.closest('button, a, input, select, textarea')) {
-      return;
-    }
-    if (event.button !== 0) {
-      return;
-    }
-    if (!isDesktopApp) {
-      return;
-    }
-
-    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))',
-      ...(isTabletStandalonePwa ? { paddingTop: 'var(--oc-safe-area-top, 0px)' } : null),
-    };
-  }, [isDesktopApp, isTabletStandalonePwa, isVSCode]);
-
   return (
     <aside
       ref={sidebarRef}
@@ -162,22 +120,6 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, cl
       }}
       aria-hidden={!isOpen || appliedWidth === 0}
     >
-      {isOpen ? (
-        <div
-          onMouseDown={handleDragStart}
-          className={cn(
-            'app-region-drag absolute inset-x-0 top-0 z-20 flex items-center justify-end px-3',
-            'h-[var(--oc-header-height,56px)]',
-          )}
-          style={webWindowControlsOverlayStyle}
-          aria-hidden
-        >
-          <div
-            ref={onTopActionsHostChange}
-            className="app-region-no-drag flex items-center gap-1"
-          />
-        </div>
-      ) : null}
       {isOpen && (
         <div
           className={cn(
@@ -199,7 +141,6 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, cl
           isResizing && 'pointer-events-none',
           !isOpen && 'pointer-events-none select-none opacity-0'
         )}
-        style={isOpen ? { paddingTop: 'var(--oc-header-height, 56px)' } : undefined}
         aria-hidden={!isOpen}
       >
         {isOpen ? children : null}

packages/ui/src/components/session/SessionSidebar.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import type { Session } from '@opencode-ai/sdk/v2';
 import { toast } from '@/components/ui';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useI18n } from '@/lib/i18n';
-import { useDeviceInfo, useTabletStandalonePwaRuntime } from '@/lib/device';
+import { useDeviceInfo } from '@/lib/device';
 import { isDesktopShell } from '@/lib/desktop';
-import { isDesktopWindowFullscreen as getDesktopWindowFullscreen, onDesktopWindowResized, startDesktopWindowDrag } from '@/lib/desktopNative';
 import { sessionEvents } from '@/lib/sessionEvents';
 import { formatDirectoryName, cn } from '@/lib/utils';
 import { useSessionUIStore } from '@/sync/session-ui-store';
@@ -37,7 +35,6 @@ import { useStickyProjectHeaders } from './sidebar/hooks/useStickyProjectHeaders
 import { getGitHubPrStatusKey, usePrVisualSummaryByKeys, useGitHubPrStatusStore } from '@/stores/useGitHubPrStatusStore';
 import { ProjectEditDialog } from '@/components/layout/ProjectEditDialog';
 import { UpdateDialog } from '@/components/ui/UpdateDialog';
-import { Icon } from "@/components/icon/Icon";
 import { SessionGroupSection } from './sidebar/SessionGroupSection';
 import { SidebarHeader } from './sidebar/SidebarHeader';
 import { SidebarActivitySections } from './sidebar/SidebarActivitySections';
@@ -262,7 +259,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   const setAboutDialogOpen = useUIStore((state) => state.setAboutDialogOpen);
   const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
   const setScheduledTasksDialogOpen = useUIStore((state) => state.setScheduledTasksDialogOpen);
-  const toggleSidebar = useUIStore((state) => state.toggleSidebar);
   const openMultiRunLauncher = useUIStore((state) => state.openMultiRunLauncher);
   const notifyOnSubtasks = useUIStore((state) => state.notifyOnSubtasks);
   const showDeletionDialog = useUIStore((state) => state.showDeletionDialog);
@@ -431,83 +427,10 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   }, []);
 
   const isDesktopShellRuntime = React.useMemo(() => isDesktopShell(), []);
-  const isTabletStandalonePwa = useTabletStandalonePwaRuntime();
-  const [isDesktopWindowFullscreen, setIsDesktopWindowFullscreen] = React.useState(false);
 
   const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
   const { isTablet } = useDeviceInfo();
   const alwaysShowSidebarActions = mobileVariant || isTablet;
-  const isMacPlatform = React.useMemo(() => {
-    if (typeof navigator === 'undefined') {
-      return false;
-    }
-    return /Macintosh|Mac OS X/.test(navigator.userAgent || '');
-  }, []);
-  const isWebRuntime = !mobileVariant && !isVSCode && !isDesktopShellRuntime;
-  const showDesktopSidebarChrome = !mobileVariant && !isVSCode && !isWebRuntime;
-  const desktopSidebarTopPaddingClass = (isDesktopShellRuntime && isMacPlatform && !isDesktopWindowFullscreen) || isTabletStandalonePwa ? 'pl-[5.5rem]' : 'pl-3';
-  const desktopSidebarToggleButtonClass = 'app-region-no-drag inline-flex h-8 w-8 items-center justify-center rounded-md typography-ui-label font-medium text-foreground transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50';
-
-  React.useEffect(() => {
-    if (!isDesktopShellRuntime || !isMacPlatform) {
-      setIsDesktopWindowFullscreen(false);
-      return;
-    }
-
-    let disposed = false;
-    let unlistenResize: (() => void) | null = null;
-
-    const syncFullscreenState = async () => {
-      try {
-        const fullscreen = await getDesktopWindowFullscreen();
-        if (!disposed) {
-          setIsDesktopWindowFullscreen(fullscreen);
-        }
-      } catch {
-        if (!disposed) {
-          setIsDesktopWindowFullscreen(false);
-        }
-      }
-    };
-
-    const attach = async () => {
-      try {
-        unlistenResize = onDesktopWindowResized(() => {
-          void syncFullscreenState();
-        });
-      } catch {
-        // Ignore listener setup failures; fallback state remains false.
-      }
-    };
-
-    void syncFullscreenState();
-    void attach();
-
-    return () => {
-      disposed = true;
-      if (unlistenResize) {
-        unlistenResize();
-      }
-    };
-  }, [isDesktopShellRuntime, isMacPlatform]);
-
-  const handleDesktopSidebarDragStart = React.useCallback(async (event: React.MouseEvent) => {
-    const target = event.target as HTMLElement;
-    if (target.closest('.app-region-no-drag')) {
-      return;
-    }
-    if (target.closest('button, a, input, select, textarea')) {
-      return;
-    }
-    if (event.button !== 0) {
-      return;
-    }
-    if (!isDesktopShellRuntime) {
-      return;
-    }
-
-    await startDesktopWindowDrag();
-  }, [isDesktopShellRuntime]);
 
   const {
     buildGroupSearchText,
@@ -908,8 +831,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     </div>
   );
 
-  const reserveHeaderActionsSpace = true;
-
   const { currentSessionDirectory } = useProjectSessionSelection({
     projectSections,
     activeProjectId,
@@ -1591,14 +1512,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     window.addEventListener('keydown', listener);
     return () => window.removeEventListener('keydown', listener);
   }, [handleBulkDelete, isInlineEditing, multiSelectStoreApi, selectionModeEnabled]);
-  const handleSidebarNewSession = React.useCallback(() => {
-    setActiveMainTab('chat');
-    if (mobileVariant) {
-      setSessionSwitcherOpen(false);
-    }
-    openNewSessionDraft();
-  }, [mobileVariant, openNewSessionDraft, setActiveMainTab, setSessionSwitcherOpen]);
-
   const handleOpenMultiRunFromHeader = React.useCallback(() => {
     setActiveMainTab('chat');
     if (mobileVariant) {
@@ -1615,40 +1528,12 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
         mobileVariant ? '' : 'bg-transparent',
       )}
     >
-      {showDesktopSidebarChrome ? (
-        <div
-          onMouseDown={handleDesktopSidebarDragStart}
-          className={cn(
-            'app-region-drag flex h-[var(--oc-header-height,56px)] flex-shrink-0 items-center pr-3',
-            desktopSidebarTopPaddingClass,
-          )}
-        >
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                onClick={toggleSidebar}
-                className={desktopSidebarToggleButtonClass}
-                aria-label={t('sessions.sidebar.header.actions.closeSessions')}
-              >
-                <Icon name="layout-left" className="h-[18px] w-[18px]" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{t('sessions.sidebar.header.actions.closeSessions')}</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-      ) : null}
-
       <SidebarHeader
         hideDirectoryControls={hideDirectoryControls}
         handleOpenDirectoryDialog={handleOpenDirectoryDialog}
-        handleNewSession={handleSidebarNewSession}
         canOpenMultiRun={projects.length > 0}
         openMultiRunLauncher={handleOpenMultiRunFromHeader}
         headerActionIconClass={headerActionIconClass}
-        reserveHeaderActionsSpace={reserveHeaderActionsSpace}
         headerActionButtonClass={headerActionButtonClass}
         isSessionSearchOpen={isSessionSearchOpen}
         setIsSessionSearchOpen={setIsSessionSearchOpen}
@@ -1662,9 +1547,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
         openScheduledTasksDialog={() => setScheduledTasksDialogOpen(true)}
         selectionModeEnabled={selectionModeEnabled}
         onToggleSelectionMode={handleToggleSelectionMode}
-        showSidebarToggle={isWebRuntime}
-        onToggleSidebar={toggleSidebar}
-        avoidWindowControlsOverlay={isTabletStandalonePwa}
       />
 
       <SidebarProjectsList

packages/ui/src/components/session/SessionSwitcherDropdown.tsx

@@ -75,8 +75,16 @@ function SwitcherContent({ onSelect, variant, scopeProjectId }: SwitcherContentP
   const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
   const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
   const ensureSessionRenderable = useSync().ensureSessionRenderable;
+  const openNewSessionDraft = useSessionUIStore((state) => state.openNewSessionDraft);
+  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
   const { t } = useI18n();
 
+  const handleNewSession = React.useCallback(() => {
+    setActiveMainTab('chat');
+    onSelect();
+    openNewSessionDraft();
+  }, [onSelect, openNewSessionDraft, setActiveMainTab]);
+
   const prefetchedRef = React.useRef<Set<string>>(new Set());
 
   React.useEffect(() => {
@@ -134,13 +142,25 @@ function SwitcherContent({ onSelect, variant, scopeProjectId }: SwitcherContentP
 
   return (
     <div className="max-h-[60vh] overflow-y-auto">
-      {items.length === 0 ? (
+      <div className="space-y-0.5">
-        <div className="px-3 py-4 text-center typography-meta text-muted-foreground">
+        <BaseMenu.Item
-          {t('sessions.switcher.empty')}
+          onClick={handleNewSession}
-        </div>
+          className={cn(
-      ) : (
+            'group relative flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden select-none',
-        <div className="space-y-0.5">
+            'data-[highlighted]:bg-interactive-hover hover:bg-interactive-hover',
-          {items.map((item) => (
+          )}
+        >
+          <Icon name="chat-new" className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+          <span className="truncate text-[14px] font-normal leading-tight text-foreground">
+            {t('sessions.sidebar.header.actions.newSession')}
+          </span>
+        </BaseMenu.Item>
+        {items.length === 0 ? (
+          <div className="px-3 py-4 text-center typography-meta text-muted-foreground">
+            {t('sessions.switcher.empty')}
+          </div>
+        ) : (
+          items.map((item) => (
             <SwitcherNode
               key={item.node.session.id}
               item={item}
@@ -150,9 +170,9 @@ function SwitcherContent({ onSelect, variant, scopeProjectId }: SwitcherContentP
               toggleParent={toggleParent}
               closeDropdown={onSelect}
             />
-          ))}
+          ))
-        </div>
+        )}
-      )}
+      </div>
     </div>
   );
 }

packages/ui/src/components/session/sidebar/SidebarHeader.tsx

@@ -16,11 +16,9 @@ import { useI18n } from '@/lib/i18n';
 type Props = {
   hideDirectoryControls: boolean;
   handleOpenDirectoryDialog: () => void;
-  handleNewSession: () => void;
   canOpenMultiRun: boolean;
   openMultiRunLauncher: () => void;
   headerActionIconClass: string;
-  reserveHeaderActionsSpace: boolean;
   headerActionButtonClass: string;
   isSessionSearchOpen: boolean;
   setIsSessionSearchOpen: (open: boolean | ((prev: boolean) => boolean)) => void;
@@ -34,9 +32,6 @@ type Props = {
   openScheduledTasksDialog: () => void;
   selectionModeEnabled: boolean;
   onToggleSelectionMode: () => void;
-  showSidebarToggle?: boolean;
-  onToggleSidebar?: () => void;
-  avoidWindowControlsOverlay?: boolean;
 };
 
 export function SidebarHeader(props: Props): React.ReactNode {
@@ -44,11 +39,9 @@ export function SidebarHeader(props: Props): React.ReactNode {
   const {
     hideDirectoryControls,
     handleOpenDirectoryDialog,
-    handleNewSession,
     canOpenMultiRun,
     openMultiRunLauncher,
     headerActionIconClass,
-    reserveHeaderActionsSpace,
     headerActionButtonClass,
     isSessionSearchOpen,
     setIsSessionSearchOpen,
@@ -62,9 +55,6 @@ export function SidebarHeader(props: Props): React.ReactNode {
     openScheduledTasksDialog,
     selectionModeEnabled,
     onToggleSelectionMode,
-    showSidebarToggle = false,
-    onToggleSidebar,
-    avoidWindowControlsOverlay = false,
   } = props;
 
   const displayMode = useSessionDisplayStore((state) => state.displayMode);
@@ -77,231 +67,186 @@ export function SidebarHeader(props: Props): React.ReactNode {
   }
 
   return (
-    <div
+    <div className="select-none flex-shrink-0 px-2.5 py-1">
-      className={cn(
+      <div className="flex h-auto min-h-8 flex-col gap-1">
-        'select-none flex-shrink-0',
+        <div className="flex h-8 items-center justify-between gap-2">
-        showSidebarToggle ? (avoidWindowControlsOverlay ? 'pl-[5.5rem] pr-3' : 'pl-3 pr-3') : 'px-2.5 py-1',
+          <div className="flex items-center gap-1.5">
-      )}
+            <Tooltip>
-      style={showSidebarToggle && avoidWindowControlsOverlay ? { paddingTop: 'var(--oc-safe-area-top, 0px)' } : undefined}
+              <TooltipTrigger asChild>
-    >
+                <button
-      {reserveHeaderActionsSpace ? (
+                  type="button"
-        <div
+                  onClick={handleOpenDirectoryDialog}
-          className={cn(
+                  className={headerActionButtonClass}
-            'flex h-auto flex-col gap-1',
+                  aria-label={t('sessions.sidebar.header.actions.addProject')}
-            showSidebarToggle
+                >
-              ? avoidWindowControlsOverlay
+                  <Icon name="folder-add" className={headerActionIconClass} />
-                ? 'min-h-[calc(var(--oc-header-height,56px)-var(--oc-safe-area-top,0px))] justify-center'
+                </button>
-                : 'min-h-[var(--oc-header-height,56px)] justify-center'
+              </TooltipTrigger>
-              : 'min-h-8',
+              <TooltipContent side="bottom" sideOffset={4}><p>{t('sessions.sidebar.header.actions.addProject')}</p></TooltipContent>
-          )}
+            </Tooltip>
-        >
-          <div className="flex h-8 items-center justify-between gap-2">
-            <div className="flex items-center gap-1.5">
-              {showSidebarToggle && onToggleSidebar ? (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      type="button"
-                      onClick={onToggleSidebar}
-                      className="inline-flex h-8 w-8 items-center justify-center rounded-md typography-ui-label font-medium text-foreground transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50"
-                      aria-label={t('sessions.sidebar.header.actions.closeSessions')}
-                    >
-                      <Icon name="layout-left" className="h-[18px] w-[18px]" />
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom" sideOffset={4}><p>{t('sessions.sidebar.header.actions.closeSessions')}</p></TooltipContent>
-                </Tooltip>
-              ) : null}
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={handleOpenDirectoryDialog}
-                    className={headerActionButtonClass}
-                    aria-label={t('sessions.sidebar.header.actions.addProject')}
-                  >
-                    <Icon name="folder-add" className={headerActionIconClass} />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="bottom" sideOffset={4}><p>{t('sessions.sidebar.header.actions.addProject')}</p></TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={handleNewSession}
-                    className={headerActionButtonClass}
-                    aria-label={t('sessions.sidebar.header.actions.newSession')}
-                  >
-                    <Icon name="chat-new" className={headerActionIconClass} />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="bottom" sideOffset={4}><p>{t('sessions.sidebar.header.actions.newSession')}</p></TooltipContent>
-              </Tooltip>
 
-              <Tooltip>
+            <Tooltip>
-                <TooltipTrigger asChild>
+              <TooltipTrigger asChild>
-                  <button
+                <button
-                    type="button"
+                  type="button"
-                    onClick={openMultiRunLauncher}
+                  onClick={openMultiRunLauncher}
-                    className={headerActionButtonClass}
+                  className={headerActionButtonClass}
-                    aria-label={t('sessions.sidebar.header.actions.newMultiRun')}
+                  aria-label={t('sessions.sidebar.header.actions.newMultiRun')}
-                    disabled={!canOpenMultiRun}
+                  disabled={!canOpenMultiRun}
-                  >
+                >
-                    <ArrowsMerge className={headerActionIconClass} />
+                  <ArrowsMerge className={headerActionIconClass} />
-                  </button>
+                </button>
-                </TooltipTrigger>
+              </TooltipTrigger>
-                <TooltipContent side="bottom" sideOffset={4}><p>{t('sessions.sidebar.header.actions.newMultiRun')}</p></TooltipContent>
+              <TooltipContent side="bottom" sideOffset={4}><p>{t('sessions.sidebar.header.actions.newMultiRun')}</p></TooltipContent>
-              </Tooltip>
+            </Tooltip>
-            </div>
 
-            <div className="flex items-center gap-1.5">
+            <Tooltip>
-              <Tooltip>
+              <TooltipTrigger asChild>
-                <TooltipTrigger asChild>
+                <button
-                  <button
+                  type="button"
-                    type="button"
+                  onClick={openScheduledTasksDialog}
-                    onClick={openScheduledTasksDialog}
+                  className={headerActionButtonClass}
-                    className={headerActionButtonClass}
+                  aria-label={t('sessions.sidebar.header.actions.scheduledTasks')}
-                    aria-label={t('sessions.sidebar.header.actions.scheduledTasks')}
+                >
-                  >
+                  <Icon name="calendar-schedule" className={headerActionIconClass} />
-                    <Icon name="calendar-schedule" className={headerActionIconClass} />
+                </button>
-                  </button>
+              </TooltipTrigger>
-                </TooltipTrigger>
+              <TooltipContent side="bottom" sideOffset={4}><p>{t('sessions.sidebar.header.actions.scheduledTasks')}</p></TooltipContent>
-                <TooltipContent side="bottom" sideOffset={4}><p>{t('sessions.sidebar.header.actions.scheduledTasks')}</p></TooltipContent>
+            </Tooltip>
-              </Tooltip>
-
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={() => setIsSessionSearchOpen((prev) => !prev)}
-                    className={headerActionButtonClass}
-                    aria-label={t('sessions.sidebar.header.actions.searchSessions')}
-                    aria-expanded={isSessionSearchOpen}
-                  >
-                    <Icon name="search" className={headerActionIconClass} />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="bottom" sideOffset={4}><p>{t('sessions.sidebar.header.actions.searchSessions')}</p></TooltipContent>
-              </Tooltip>
-
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={onToggleSelectionMode}
-                    className={cn(headerActionButtonClass, selectionModeEnabled && 'bg-interactive-hover text-primary')}
-                    aria-label={selectionModeEnabled
-                      ? t('sessions.sidebar.header.actions.exitSelection')
-                      : t('sessions.sidebar.header.actions.selectSessions')}
-                    aria-pressed={selectionModeEnabled}
-                  >
-                    <Icon name="checkbox-multiple" className={headerActionIconClass} />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="bottom" sideOffset={4}>
-                  <p>{selectionModeEnabled
-                    ? t('sessions.sidebar.header.actions.exitSelection')
-                    : t('sessions.sidebar.header.actions.selectSessions')}</p>
-                </TooltipContent>
-              </Tooltip>
-
-              <DropdownMenu>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <DropdownMenuTrigger asChild>
-                      <button
-                        type="button"
-                        className={headerActionButtonClass}
-                        aria-label={t('sessions.sidebar.header.actions.sessionDisplayMode')}
-                      >
-                        <Icon name="equalizer-2" className={headerActionIconClass} />
-                      </button>
-                    </DropdownMenuTrigger>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom" sideOffset={4}><p>{t('sessions.sidebar.header.displayMode.label')}</p></TooltipContent>
-                </Tooltip>
-                <DropdownMenuContent align="end" className="min-w-[160px]">
-                  <DropdownMenuItem
-                    onClick={() => setDisplayMode('default')}
-                    className="flex items-center justify-between"
-                  >
-                    <span>{t('sessions.sidebar.header.displayMode.default')}</span>
-                    {displayMode === 'default' ? <Icon name="check" className="h-4 w-4 text-primary" /> : null}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onClick={() => setDisplayMode('minimal')}
-                    className="flex items-center justify-between"
-                  >
-                    <span>{t('sessions.sidebar.header.displayMode.minimal')}</span>
-                    {displayMode === 'minimal' ? <Icon name="check" className="h-4 w-4 text-primary" /> : null}
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    onClick={toggleRecentSection}
-                    className="flex items-center justify-between"
-                  >
-                    <span>{t('sessions.sidebar.header.displayMode.showRecent')}</span>
-                    {showRecentSection ? <Icon name="check" className="h-4 w-4 text-primary" /> : null}
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem onClick={collapseAllProjects} className="flex items-center gap-2">
-                    <Icon name="contract-up-down" className="h-4 w-4" />
-                    <span>{t('sessions.sidebar.header.displayMode.collapseAll')}</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={expandAllProjects} className="flex items-center gap-2">
-                    <Icon name="expand-up-down" className="h-4 w-4" />
-                    <span>{t('sessions.sidebar.header.displayMode.expandAll')}</span>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
           </div>
 
-          {isSessionSearchOpen ? (
+          <div className="flex items-center gap-1.5">
-            <div className="pb-1">
+            <Tooltip>
-              <div className="mb-1 flex items-center justify-between px-0.5 typography-micro text-muted-foreground/80">
+              <TooltipTrigger asChild>
-                {hasSessionSearchQuery ? (
+                <button
-                  <span>{searchMatchCount === 1
+                  type="button"
-                    ? t('sessions.sidebar.header.search.matchCountSingle', { count: searchMatchCount })
+                  onClick={() => setIsSessionSearchOpen((prev) => !prev)}
-                    : t('sessions.sidebar.header.search.matchCountPlural', { count: searchMatchCount })}</span>
+                  className={headerActionButtonClass}
-                ) : <span />}
+                  aria-label={t('sessions.sidebar.header.actions.searchSessions')}
-                <span>{t('sessions.sidebar.header.search.escapeHint')}</span>
+                  aria-expanded={isSessionSearchOpen}
-              </div>
+                >
-              <div className="relative">
+                  <Icon name="search" className={headerActionIconClass} />
-                <Icon name="search" className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                </button>
-                <input
+              </TooltipTrigger>
-                  ref={sessionSearchInputRef}
+              <TooltipContent side="bottom" sideOffset={4}><p>{t('sessions.sidebar.header.actions.searchSessions')}</p></TooltipContent>
-                  value={sessionSearchQuery}
+            </Tooltip>
-                  onChange={(event) => setSessionSearchQuery(event.target.value)}
+
-                  placeholder={t('sessions.sidebar.header.search.placeholder')}
+            <Tooltip>
-                  className="h-8 w-full rounded-md border border-border bg-transparent pl-8 pr-8 typography-ui-label text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+              <TooltipTrigger asChild>
-                  onKeyDown={(event) => {
+                <button
-                    if (event.key === 'Escape') {
+                  type="button"
-                      event.stopPropagation();
+                  onClick={onToggleSelectionMode}
-                      if (hasSessionSearchQuery) {
+                  className={cn(headerActionButtonClass, selectionModeEnabled && 'bg-interactive-hover text-primary')}
-                        setSessionSearchQuery('');
+                  aria-label={selectionModeEnabled
-                      } else {
+                    ? t('sessions.sidebar.header.actions.exitSelection')
-                        setIsSessionSearchOpen(false);
+                    : t('sessions.sidebar.header.actions.selectSessions')}
-                      }
+                  aria-pressed={selectionModeEnabled}
-                    }
+                >
-                  }}
+                  <Icon name="checkbox-multiple" className={headerActionIconClass} />
-                />
+                </button>
-                {sessionSearchQuery.length > 0 ? (
+              </TooltipTrigger>
-                  <button
+              <TooltipContent side="bottom" sideOffset={4}>
-                    type="button"
+                <p>{selectionModeEnabled
-                    onClick={() => setSessionSearchQuery('')}
+                  ? t('sessions.sidebar.header.actions.exitSelection')
-                    className="absolute right-1 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground hover:bg-interactive-hover/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                  : t('sessions.sidebar.header.actions.selectSessions')}</p>
-                    aria-label={t('sessions.sidebar.header.search.clear')}
+              </TooltipContent>
-                  >
+            </Tooltip>
-                    <Icon name="close" className="h-3.5 w-3.5" />
+
-                  </button>
+            <DropdownMenu>
-                ) : null}
+              <Tooltip>
-              </div>
+                <TooltipTrigger asChild>
-            </div>
+                  <DropdownMenuTrigger asChild>
-          ) : null}
+                    <button
+                      type="button"
+                      className={headerActionButtonClass}
+                      aria-label={t('sessions.sidebar.header.actions.sessionDisplayMode')}
+                    >
+                      <Icon name="equalizer-2" className={headerActionIconClass} />
+                    </button>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" sideOffset={4}><p>{t('sessions.sidebar.header.displayMode.label')}</p></TooltipContent>
+              </Tooltip>
+              <DropdownMenuContent align="end" className="min-w-[160px]">
+                <DropdownMenuItem
+                  onClick={() => setDisplayMode('default')}
+                  className="flex items-center justify-between"
+                >
+                  <span>{t('sessions.sidebar.header.displayMode.default')}</span>
+                  {displayMode === 'default' ? <Icon name="check" className="h-4 w-4 text-primary" /> : null}
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => setDisplayMode('minimal')}
+                  className="flex items-center justify-between"
+                >
+                  <span>{t('sessions.sidebar.header.displayMode.minimal')}</span>
+                  {displayMode === 'minimal' ? <Icon name="check" className="h-4 w-4 text-primary" /> : null}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={toggleRecentSection}
+                  className="flex items-center justify-between"
+                >
+                  <span>{t('sessions.sidebar.header.displayMode.showRecent')}</span>
+                  {showRecentSection ? <Icon name="check" className="h-4 w-4 text-primary" /> : null}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={collapseAllProjects} className="flex items-center gap-2">
+                  <Icon name="contract-up-down" className="h-4 w-4" />
+                  <span>{t('sessions.sidebar.header.displayMode.collapseAll')}</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={expandAllProjects} className="flex items-center gap-2">
+                  <Icon name="expand-up-down" className="h-4 w-4" />
+                  <span>{t('sessions.sidebar.header.displayMode.expandAll')}</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
-      ) : null}
+
+        {isSessionSearchOpen ? (
+          <div className="pb-1">
+            <div className="mb-1 flex items-center justify-between px-0.5 typography-micro text-muted-foreground/80">
+              {hasSessionSearchQuery ? (
+                <span>{searchMatchCount === 1
+                  ? t('sessions.sidebar.header.search.matchCountSingle', { count: searchMatchCount })
+                  : t('sessions.sidebar.header.search.matchCountPlural', { count: searchMatchCount })}</span>
+              ) : <span />}
+              <span>{t('sessions.sidebar.header.search.escapeHint')}</span>
+            </div>
+            <div className="relative">
+              <Icon name="search" className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <input
+                ref={sessionSearchInputRef}
+                value={sessionSearchQuery}
+                onChange={(event) => setSessionSearchQuery(event.target.value)}
+                placeholder={t('sessions.sidebar.header.search.placeholder')}
+                className="h-8 w-full rounded-md border border-border bg-transparent pl-8 pr-8 typography-ui-label text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                onKeyDown={(event) => {
+                  if (event.key === 'Escape') {
+                    event.stopPropagation();
+                    if (hasSessionSearchQuery) {
+                      setSessionSearchQuery('');
+                    } else {
+                      setIsSessionSearchOpen(false);
+                    }
+                  }
+                }}
+              />
+              {sessionSearchQuery.length > 0 ? (
+                <button
+                  type="button"
+                  onClick={() => setSessionSearchQuery('')}
+                  className="absolute right-1 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground hover:bg-interactive-hover/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                  aria-label={t('sessions.sidebar.header.search.clear')}
+                >
+                  <Icon name="close" className="h-3.5 w-3.5" />
+                </button>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+      </div>
     </div>
   );
 }