fix(header): one session-tab menu, hidden scrollbar, right-click, control order

The strip now owns a single dropdown per tab, fed by the header with
items bound to that tab's session — rename (activates the tab first),
copy id, share/copy link/unshare, export and move-to-worktree (active
tab only, they need the loaded directory), close other tabs, archive
and delete with the confirm dialog targeting the right session. The
separate inactive-tab menu is gone, and there is no Close item — the
tab's close button covers it, now placed after the menu button.

Right-click opens that menu without activating the tab. The menu's
anchor overlay stays mounted until the close animation finishes, which
removes the popup flashing in the top-left corner on close. The
scroller hides its scrollbar via a dedicated CSS class (the bar was
shifting the header content vertically).

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

@@ -49,7 +49,7 @@ import type { SessionContextUsage } from '@/stores/types/sessionTypes';
 import { DesktopHostSwitcherDialog } from '@/components/desktop/DesktopHostSwitcher';
 import { OpenInAppButton } from '@/components/desktop/OpenInAppButton';
 import { SessionSwitcherDropdown } from '@/components/session/SessionSwitcherDropdown';
-import { SessionTabsStrip } from './SessionTabsStrip';
+import { SessionTabsStrip, type SessionTabMenuArgs } from './SessionTabsStrip';
 import { canUseElectronDesktopIPC, invokeDesktop, isDesktopLocalOriginActive, isDesktopShell, isVSCodeRuntime, startDesktopWindowDrag, type UpdateInfo } from '@/lib/desktop';
 import { desktopHostsGet, redactSensitiveUrl } from '@/lib/desktopHosts';
 import {
@@ -928,7 +928,7 @@ export const Header: React.FC = () => {
   const [isHeaderSessionMenuOpen, setIsHeaderSessionMenuOpen] = React.useState(false);
   const pendingHeaderRenameRef = React.useRef(false);
   const [headerSessionTitleDraft, setHeaderSessionTitleDraft] = React.useState('');
-  const [pendingHeaderRetentionAction, setPendingHeaderRetentionAction] = React.useState<'archive' | 'delete' | null>(null);
+  const [pendingHeaderRetentionAction, setPendingHeaderRetentionAction] = React.useState<{ action: 'archive' | 'delete'; sessionId: string } | null>(null);
   const headerRenameFormRef = React.useRef<HTMLFormElement | null>(null);
 
   React.useEffect(() => {
@@ -966,18 +966,18 @@ export const Header: React.FC = () => {
     return () => document.removeEventListener('mousedown', handleDocumentMouseDown);
   }, [isRenamingHeaderSession, saveHeaderSessionRename]);
 
-  const copyCurrentSessionId = React.useCallback(() => {
+  const copySessionIdFor = React.useCallback((sessionId: string) => {
-    if (!currentSessionId) return;
+    if (!sessionId) return;
-    void copyTextToClipboard(currentSessionId).then((result) => {
+    void copyTextToClipboard(sessionId).then((result) => {
       toast[result.ok ? 'success' : 'error'](t(result.ok
         ? 'sessions.sidebar.session.copyId.success'
         : 'sessions.sidebar.session.copyId.error'));
     }).catch(() => toast.error(t('sessions.sidebar.session.copyId.error')));
-  }, [currentSessionId, t]);
+  }, [t]);
 
-  const shareCurrentSession = React.useCallback(async () => {
+  const shareSessionFor = React.useCallback(async (sessionId: string) => {
-    if (!currentSessionId) return;
+    if (!sessionId) return;
-    const result = await shareSession(currentSessionId);
+    const result = await shareSession(sessionId);
     if (result?.share?.url) {
       const copied = await copyTextToClipboard(result.share.url);
       toast[copied.ok ? 'success' : 'warning'](t('sessions.sidebar.session.share.successTitle'), {
@@ -988,25 +988,24 @@ export const Header: React.FC = () => {
       return;
     }
     toast.error(t('sessions.sidebar.session.share.error'));
-  }, [currentSessionId, shareSession, t]);
+  }, [shareSession, t]);
 
-  const copyCurrentSessionShareUrl = React.useCallback(() => {
+  const copySessionShareUrl = React.useCallback((shareUrl: string | null | undefined) => {
-    const shareUrl = currentSession?.shareUrl;
     if (!shareUrl) return;
     void copyTextToClipboard(shareUrl).then((result) => {
       toast[result.ok ? 'success' : 'error'](t(result.ok
         ? 'sessions.sidebar.session.menu.copied'
         : 'sessions.sidebar.session.share.copyUrlError'));
     }).catch(() => toast.error(t('sessions.sidebar.session.share.copyUrlError')));
-  }, [currentSession?.shareUrl, t]);
+  }, [t]);
 
-  const unshareCurrentSession = React.useCallback(async () => {
+  const unshareSessionFor = React.useCallback(async (sessionId: string) => {
-    if (!currentSessionId) return;
+    if (!sessionId) return;
-    const result = await unshareSession(currentSessionId);
+    const result = await unshareSession(sessionId);
     toast[result ? 'success' : 'error'](t(result
       ? 'sessions.sidebar.session.unshare.success'
       : 'sessions.sidebar.session.unshare.error'));
-  }, [currentSessionId, t, unshareSession]);
+  }, [t, unshareSession]);
 
   const exportCurrentSession = React.useCallback(async () => {
     if (!currentSessionId || !openDirectory) {
@@ -1059,9 +1058,9 @@ export const Header: React.FC = () => {
   }, [currentSessionId, isCurrentSessionActive, isCurrentSessionMovingToWorktree, sessionDirectory, t]);
 
   const confirmHeaderRetentionAction = React.useCallback(async () => {
-    if (!currentSessionId || !pendingHeaderRetentionAction) return;
+    if (!pendingHeaderRetentionAction) return;
     const sessions = useGlobalSessionsStore.getState().activeSessions;
-    const ids = [currentSessionId];
+    const ids = [pendingHeaderRetentionAction.sessionId];
     for (let index = 0; index < ids.length; index += 1) {
       const parentId = ids[index];
       for (const session of sessions) {
@@ -1070,7 +1069,7 @@ export const Header: React.FC = () => {
         }
       }
     }
-    const action = pendingHeaderRetentionAction;
+    const action = pendingHeaderRetentionAction.action;
     setPendingHeaderRetentionAction(null);
     const result = action === 'archive' ? await archiveSessions(ids) : await deleteSessions(ids);
     const failedIds = result.failedIds;
@@ -1083,7 +1082,7 @@ export const Header: React.FC = () => {
     toast.success(t(action === 'archive'
       ? 'sessions.sidebar.session.archive.success'
       : 'sessions.sidebar.session.delete.success'));
-  }, [archiveSessions, currentSessionId, deleteSessions, pendingHeaderRetentionAction, t]);
+  }, [archiveSessions, deleteSessions, pendingHeaderRetentionAction, t]);
 
   // Full-page surfaces (Scheduled, Archive, Worktrees, Multi-run) replace the
   // chat area; while one is open the header shows the surface identity
@@ -1531,6 +1530,75 @@ export const Header: React.FC = () => {
 
   const showMiniChatHeaderAction = hasElectronDesktopIPC && (isNewSessionDraftOpen || Boolean(currentSessionId));
 
+  const renderSessionTabMenu = React.useCallback(({ session, isActive, select, closeOtherTabs }: SessionTabMenuArgs) => {
+    const shareUrl = session.share?.url ?? null;
+    const canMoveToWorktree = isActive && !isVSCode && !isChatContext && currentSession && !currentSession.parentId;
+    return (
+      <>
+        <DropdownMenuItem onClick={() => { if (!isActive) select(); pendingHeaderRenameRef.current = true; }}>
+          <Icon name="pencil-ai" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.rename')}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => copySessionIdFor(session.id)}>
+          <Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyId')}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        {shareUrl ? (
+          <>
+            <DropdownMenuItem onClick={() => copySessionShareUrl(shareUrl)}>
+              <Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyLink')}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => void unshareSessionFor(session.id)}>
+              <Icon name="link-unlink-m" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.unshare')}
+            </DropdownMenuItem>
+          </>
+        ) : (
+          <DropdownMenuItem onClick={() => void shareSessionFor(session.id)}>
+            <Icon name="share-2" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.share')}
+          </DropdownMenuItem>
+        )}
+        {isActive ? (
+          <DropdownMenuItem onClick={() => void exportCurrentSession()}>
+            <Icon name="download" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.exportMarkdown')}
+          </DropdownMenuItem>
+        ) : null}
+        {canMoveToWorktree ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="block">
+                <DropdownMenuItem
+                  disabled={!sessionDirectory || isCurrentSessionActive || isCurrentSessionMovingToWorktree}
+                  onClick={moveCurrentSessionToWorktree}
+                  className="w-full"
+                >
+                  <Icon name="folder-shared" className="mr-2 size-4" />
+                  {t('sessions.sidebar.session.menu.moveToWorktree')}
+                </DropdownMenuItem>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="right" className="max-w-72">
+              {isCurrentSessionMovingToWorktree
+                ? t('sessions.sidebar.session.moveToWorktree.tooltipMoving')
+                : isCurrentSessionActive
+                  ? t('sessions.sidebar.session.moveToWorktree.tooltipBusy')
+                  : t('sessions.sidebar.session.moveToWorktree.tooltip')}
+            </TooltipContent>
+          </Tooltip>
+        ) : null}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={closeOtherTabs}>
+          <Icon name="close-circle" className="mr-2 size-4" />{t('header.sessionTabs.closeOtherTabs')}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => setPendingHeaderRetentionAction({ action: 'archive', sessionId: session.id })}>
+          <Icon name="inbox-archive" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.archive')}
+        </DropdownMenuItem>
+        <DropdownMenuItem className="text-destructive focus:text-destructive" onClick={() => setPendingHeaderRetentionAction({ action: 'delete', sessionId: session.id })}>
+          <Icon name="delete-bin" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.delete')}
+        </DropdownMenuItem>
+      </>
+    );
+  }, [copySessionIdFor, copySessionShareUrl, currentSession, exportCurrentSession, isChatContext, isCurrentSessionActive, isCurrentSessionMovingToWorktree, isVSCode, moveCurrentSessionToWorktree, sessionDirectory, shareSessionFor, t, unshareSessionFor]);
+
   const renderDesktop = () => (
     <div
       onMouseDown={handleDragStart}
@@ -1678,15 +1746,15 @@ export const Header: React.FC = () => {
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end" className="min-w-[190px]">
                     <DropdownMenuItem onClick={() => { pendingHeaderRenameRef.current = true; }}><Icon name="pencil-ai" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.rename')}</DropdownMenuItem>
-                    <DropdownMenuItem onClick={copyCurrentSessionId}><Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyId')}</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => currentSessionId && copySessionIdFor(currentSessionId)}><Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyId')}</DropdownMenuItem>
                     <DropdownMenuSeparator />
                     {currentSession?.shareUrl ? (
                       <>
-                        <DropdownMenuItem onClick={copyCurrentSessionShareUrl}><Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyLink')}</DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => copySessionShareUrl(currentSession?.shareUrl)}><Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyLink')}</DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => void unshareCurrentSession()}><Icon name="link-unlink-m" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.unshare')}</DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => { if (currentSessionId) void unshareSessionFor(currentSessionId); }}><Icon name="link-unlink-m" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.unshare')}</DropdownMenuItem>
                       </>
                     ) : (
-                      <DropdownMenuItem onClick={() => void shareCurrentSession()}><Icon name="share-2" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.share')}</DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => { if (currentSessionId) void shareSessionFor(currentSessionId); }}><Icon name="share-2" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.share')}</DropdownMenuItem>
                     )}
                     <DropdownMenuItem onClick={() => void exportCurrentSession()}><Icon name="download" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.exportMarkdown')}</DropdownMenuItem>
                     {!isVSCode && !isChatContext && currentSession && !currentSession.parentId ? (
@@ -1713,8 +1781,8 @@ export const Header: React.FC = () => {
                       </Tooltip>
                     ) : null}
                     <DropdownMenuSeparator />
-                    <DropdownMenuItem onClick={() => setPendingHeaderRetentionAction('archive')}><Icon name="inbox-archive" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.archive')}</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => { if (currentSessionId) setPendingHeaderRetentionAction({ action: 'archive', sessionId: currentSessionId }); }}><Icon name="inbox-archive" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.archive')}</DropdownMenuItem>
-                    <DropdownMenuItem className="text-destructive focus:text-destructive" onClick={() => setPendingHeaderRetentionAction('delete')}><Icon name="delete-bin" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.delete')}</DropdownMenuItem>
+                    <DropdownMenuItem className="text-destructive focus:text-destructive" onClick={() => { if (currentSessionId) setPendingHeaderRetentionAction({ action: 'delete', sessionId: currentSessionId }); }}><Icon name="delete-bin" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.delete')}</DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
               ) : null}
@@ -1734,65 +1802,13 @@ export const Header: React.FC = () => {
               </SessionSwitcherDropdown>
             ) : null}
             <SessionTabsStrip
-              menuOpen={isHeaderSessionMenuOpen}
+              renderMenu={renderSessionTabMenu}
-              menu={currentSessionId && !isNewSessionDraftOpen && !isRenamingHeaderSession ? (
+              onMenuOpenChangeComplete={(open) => {
-                <DropdownMenu
+                if (!open && pendingHeaderRenameRef.current) {
-                  open={isHeaderSessionMenuOpen}
+                  pendingHeaderRenameRef.current = false;
-                  onOpenChange={setIsHeaderSessionMenuOpen}
+                  beginHeaderSessionRename();
-                  onOpenChangeComplete={(open) => {
+                }
-                    if (!open && pendingHeaderRenameRef.current) {
+              }}
-                      pendingHeaderRenameRef.current = false;
-                      beginHeaderSessionRename();
-                    }
-                  }}
-                >
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="xs" className="size-5 min-w-0 px-0 text-muted-foreground hover:bg-transparent hover:text-foreground" aria-label={t('header.sessionActions.openAria')}>
-                      <Icon name="more" className="size-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="min-w-[190px]">
-                    <DropdownMenuItem onClick={() => { pendingHeaderRenameRef.current = true; }}><Icon name="pencil-ai" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.rename')}</DropdownMenuItem>
-                    <DropdownMenuItem onClick={copyCurrentSessionId}><Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyId')}</DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    {currentSession?.shareUrl ? (
-                      <>
-                        <DropdownMenuItem onClick={copyCurrentSessionShareUrl}><Icon name="file-copy" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.copyLink')}</DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => void unshareCurrentSession()}><Icon name="link-unlink-m" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.unshare')}</DropdownMenuItem>
-                      </>
-                    ) : (
-                      <DropdownMenuItem onClick={() => void shareCurrentSession()}><Icon name="share-2" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.share')}</DropdownMenuItem>
-                    )}
-                    <DropdownMenuItem onClick={() => void exportCurrentSession()}><Icon name="download" className="mr-2 size-4" />{t('sessions.sidebar.session.menu.exportMarkdown')}</DropdownMenuItem>
-                    {!isVSCode && !isChatContext && currentSession && !currentSession.parentId ? (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <span className="block">
-                            <DropdownMenuItem
-                              disabled={!sessionDirectory || isCurrentSessionActive || isCurrentSessionMovingToWorktree}
-                              onClick={moveCurrentSessionToWorktree}
-                              className="w-full"
-                            >
-                              <Icon name="folder-shared" className="mr-2 size-4" />
-                              {t('sessions.sidebar.session.menu.moveToWorktree')}
-                            </DropdownMenuItem>
-                          </span>
-                        </TooltipTrigger>
-                        <TooltipContent side="right" className="max-w-72">
-                          {isCurrentSessionMovingToWorktree
-                            ? t('sessions.sidebar.session.moveToWorktree.tooltipMoving')
-                            : isCurrentSessionActive
-                              ? t('sessions.sidebar.session.moveToWorktree.tooltipBusy')
-                              : t('sessions.sidebar.session.moveToWorktree.tooltip')}
-                        </TooltipContent>
-                      </Tooltip>
-                    ) : null}
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem onClick={() => setPendingHeaderRetentionAction('archive')}><Icon name="inbox-archive" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.archive')}</DropdownMenuItem>
-                    <DropdownMenuItem className="text-destructive focus:text-destructive" onClick={() => setPendingHeaderRetentionAction('delete')}><Icon name="delete-bin" className="mr-2 size-4" />{t('sessions.sidebar.bulkActions.delete')}</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              ) : null}
             >
             <div className="flex min-w-0 flex-col justify-center">
               {isRenamingHeaderSession ? (
@@ -1933,10 +1949,10 @@ export const Header: React.FC = () => {
       <Dialog open={pendingHeaderRetentionAction !== null} onOpenChange={(open) => { if (!open) setPendingHeaderRetentionAction(null); }}>
         <DialogContent showCloseButton={false} className="max-w-sm gap-5">
           <DialogHeader>
-            <DialogTitle>{pendingHeaderRetentionAction === 'delete'
+            <DialogTitle>{pendingHeaderRetentionAction?.action === 'delete'
               ? t('sessions.sidebar.dialogs.deleteSession.title')
               : t('sessions.sidebar.dialogs.archiveSession.title')}</DialogTitle>
-            <DialogDescription>{pendingHeaderRetentionAction === 'delete'
+            <DialogDescription>{pendingHeaderRetentionAction?.action === 'delete'
               ? t('sessions.sidebar.dialogs.deleteSession.single', { sessionTitle: currentSessionTitle })
               : t('sessions.sidebar.dialogs.archiveSession.single', { sessionTitle: currentSessionTitle })}</DialogDescription>
           </DialogHeader>
@@ -1945,7 +1961,7 @@ export const Header: React.FC = () => {
               {t('sessions.sidebar.dialogs.cancel')}
             </Button>
             <Button variant="destructive" size="sm" onClick={() => void confirmHeaderRetentionAction()}>
-              {pendingHeaderRetentionAction === 'delete'
+              {pendingHeaderRetentionAction?.action === 'delete'
                 ? t('sessions.sidebar.bulkActions.delete')
                 : t('sessions.sidebar.bulkActions.archive')}
             </Button>

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

@@ -20,113 +20,75 @@ import type { Session } from '@opencode-ai/sdk/v2';
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Icon } from '@/components/icon/Icon';
 import { cn } from '@/lib/utils';
 import { useI18n } from '@/lib/i18n';
-import { copyTextToClipboard } from '@/lib/clipboard';
 import { useSessionTabsStore } from '@/stores/useSessionTabsStore';
 import { useGlobalSessionsStore, resolveGlobalSessionDirectory } from '@/stores/useGlobalSessionsStore';
 import { useSessionUIStore } from '@/sync/session-ui-store';
 
 const restrictToXAxis: Modifier = ({ transform }) => ({ ...transform, y: 0 });
 
+type SessionTab = { id: string; session: Session };
+
+export type SessionTabMenuArgs = {
+  session: Session;
+  isActive: boolean;
+  select: () => void;
+  closeOtherTabs: () => void;
+};
+
 /**
- * Sortable shell for the active tab: the pill itself drags, while the
+ * One tab, active or not. The tab drags to reorder; the menu and close
- * interactive content inside (rename form, menu) stops pointer-down so a text
+ * controls sit in a hover-revealed overlay at the tab's end (menu first,
- * selection or menu click never starts a drag. The close button and the
+ * close after it). The single session menu is supplied by the header via
- * session menu (passed down from the header) reveal on hover, exactly like on
+ * `renderMenu`, bound to this tab's session; right-click opens it without
- * inactive tabs.
+ * changing which tab is active. The overlay stays visible until the menu's
+ * close animation completes, so the popup never loses its anchor mid-flight
+ * (that was the top-left corner flash).
  */
-const ActiveTabShell: React.FC<{
+const SessionTabItem: React.FC<{
-  id: string;
+  tab: SessionTab;
-  menu: React.ReactNode;
+  isActive: boolean;
-  menuOpen: boolean;
+  onSelect: (tab: SessionTab) => void;
-  onClose: () => void;
+  onClose: (id: string) => void;
-  closeLabel: string;
+  renderMenu: (args: SessionTabMenuArgs) => React.ReactNode;
-  children: React.ReactNode;
+  closeOtherTabs: (id: string) => void;
-}> = ({ id, menu, menuOpen, onClose, closeLabel, children }) => {
+  onMenuOpenChangeComplete?: (open: boolean) => void;
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  children?: React.ReactNode;
+}> = ({ tab, isActive, onSelect, onClose, renderMenu, closeOtherTabs, onMenuOpenChangeComplete, children }) => {
+  const { t } = useI18n();
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  // Keeps the overlay (the menu's anchor) mounted through the close animation.
+  const [menuVisible, setMenuVisible] = React.useState(false);
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: tab.id });
+
+  const title = tab.session.title?.trim() || t('sessions.sidebar.session.untitled');
+  const overlayVisible = menuOpen || menuVisible;
+
+  const openMenu = React.useCallback(() => {
+    setMenuVisible(true);
+    setMenuOpen(true);
+  }, []);
+
   return (
     <div
       ref={setNodeRef}
       style={{ transform: DndCSS.Translate.toString(transform), transition }}
       className={cn('session-tab-slot flex h-7 w-44 shrink-0 touch-none', isDragging && 'z-10 opacity-60')}
-      data-active-session-tab
+      data-active={isActive ? 'true' : 'false'}
-      data-active="true"
+      {...(isActive ? { 'data-active-session-tab': true } : {})}
       {...attributes}
       {...listeners}
     >
       <div
         role="tab"
-        aria-selected
+        aria-selected={isActive}
-        className="group/session-tab relative flex h-7 w-full min-w-0 items-center rounded-md bg-interactive-selection px-2"
+        tabIndex={isActive ? undefined : 0}
-      >
+        onClick={isActive ? undefined : () => onSelect(tab)}
-        <div className={cn('min-w-0 flex-1', 'group-hover/session-tab:pr-10', menuOpen && 'pr-10')}>
+        onKeyDown={isActive ? undefined : (event) => {
-          {children}
-        </div>
-        <div
-          onPointerDown={(event) => event.stopPropagation()}
-          className={cn(
-            'absolute right-1 top-1/2 hidden -translate-y-1/2 items-center gap-0.5',
-            'opacity-0 transition-opacity duration-150',
-            'group-hover/session-tab:flex group-hover/session-tab:opacity-100',
-            menuOpen && 'flex opacity-100',
-          )}
-        >
-          <button
-            type="button"
-            aria-label={closeLabel}
-            onClick={onClose}
-            className="flex size-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
-          >
-            <Icon name="close" className="size-4" />
-          </button>
-          {menu}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-type SessionTab = { id: string; session: Session };
-
-/**
- * One inactive tab: a soft pill with the session title. The "..." menu trigger
- * has no reserved footprint — it appears at the tab's end on hover (or while
- * its menu is open), nudging the title, mirroring the sidebar row mechanic.
- * The reveal itself is opacity-only; the layout change is instant.
- */
-const InactiveSessionTab: React.FC<{
-  tab: SessionTab;
-  onSelect: (tab: SessionTab) => void;
-  onClose: (id: string) => void;
-  onCloseOthers: (id: string) => void;
-}> = ({ tab, onSelect, onClose, onCloseOthers }) => {
-  const { t } = useI18n();
-  const [menuOpen, setMenuOpen] = React.useState(false);
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: tab.id });
-
-  const title = tab.session.title?.trim() || t('sessions.sidebar.session.untitled');
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: DndCSS.Translate.toString(transform), transition }}
-      className={cn('session-tab-slot flex h-7 w-44 shrink-0', isDragging && 'z-10 opacity-60')}
-      data-active="false"
-      {...attributes}
-      {...listeners}
-    >
-      <div
-        role="tab"
-        aria-selected={false}
-        tabIndex={0}
-        onClick={() => onSelect(tab)}
-        onKeyDown={(event) => {
           if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             onSelect(tab);
@@ -138,22 +100,27 @@ const InactiveSessionTab: React.FC<{
             onClose(tab.id);
           }
         }}
+        onContextMenu={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          openMenu();
+        }}
         className={cn(
-          'group/session-tab relative flex h-7 w-full min-w-0 cursor-pointer touch-none select-none items-center rounded-md px-2',
+          'group/session-tab relative flex h-7 w-full min-w-0 select-none items-center rounded-md px-2',
-          'text-muted-foreground transition-colors duration-150 hover:bg-interactive-hover hover:text-foreground',
+          isActive
-          menuOpen && 'bg-interactive-hover text-foreground',
+            ? 'bg-interactive-selection'
+            : cn(
+              'cursor-pointer text-muted-foreground transition-colors duration-150 hover:bg-interactive-hover hover:text-foreground',
+              overlayVisible && 'bg-interactive-hover text-foreground',
+            ),
         )}
-        title={title}
+        title={isActive ? undefined : title}
       >
-        <span
+        <div className={cn('min-w-0 flex-1', 'group-hover/session-tab:pr-10', overlayVisible && 'pr-10')}>
-          className={cn(
+          {isActive ? children : (
-            'min-w-0 flex-1 truncate text-[13px] font-medium leading-4',
+            <span className="block min-w-0 truncate text-[13px] font-medium leading-4">{title}</span>
-            'group-hover/session-tab:pr-10',
-            menuOpen && 'pr-10',
           )}
-        >
+        </div>
-          {title}
-        </span>
         <div
           onClick={(event) => event.stopPropagation()}
           onPointerDown={(event) => event.stopPropagation()}
@@ -161,9 +128,38 @@ const InactiveSessionTab: React.FC<{
             'absolute right-1 top-1/2 hidden -translate-y-1/2 items-center gap-0.5',
             'opacity-0 transition-opacity duration-150',
             'group-hover/session-tab:flex group-hover/session-tab:opacity-100',
-            menuOpen && 'flex opacity-100',
+            overlayVisible && 'flex opacity-100',
           )}
         >
+          <DropdownMenu
+            open={menuOpen}
+            onOpenChange={(open) => {
+              setMenuOpen(open);
+              if (open) setMenuVisible(true);
+            }}
+            onOpenChangeComplete={(open) => {
+              if (!open) setMenuVisible(false);
+              onMenuOpenChangeComplete?.(open);
+            }}
+          >
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                aria-label={t('header.sessionTabs.tabMenuAria')}
+                className="flex size-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
+              >
+                <Icon name="more" className="size-4" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="min-w-[190px]">
+              {renderMenu({
+                session: tab.session,
+                isActive,
+                select: () => onSelect(tab),
+                closeOtherTabs: () => closeOtherTabs(tab.id),
+              })}
+            </DropdownMenuContent>
+          </DropdownMenu>
           <button
             type="button"
             aria-label={t('header.sessionTabs.closeTab')}
@@ -172,32 +168,6 @@ const InactiveSessionTab: React.FC<{
           >
             <Icon name="close" className="size-4" />
           </button>
-        <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              aria-label={t('header.sessionTabs.tabMenuAria')}
-              className="flex size-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
-            >
-              <Icon name="more" className="size-4" />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" className="min-w-[190px]">
-            <DropdownMenuItem onClick={() => onClose(tab.id)}>
-              <Icon name="close" className="mr-2 size-4" />
-              {t('header.sessionTabs.closeTab')}
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => onCloseOthers(tab.id)}>
-              <Icon name="close-circle" className="mr-2 size-4" />
-              {t('header.sessionTabs.closeOtherTabs')}
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={() => void copyTextToClipboard(tab.id)}>
-              <Icon name="file-copy" className="mr-2 size-4" />
-              {t('sessions.sidebar.session.menu.copyId')}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
         </div>
       </div>
     </div>
@@ -208,20 +178,19 @@ const InactiveSessionTab: React.FC<{
  * The header's horizontal working set of sessions (web/desktop only).
  *
  * Every session the user opens joins the strip once; the tab whose session is
- * current renders `children` — the header's existing title block with rename,
+ * current renders `children` — the header's title/rename block — inside a
- * meta row and the full session menu — inside a softly selected pill. Closing
+ * selected pill. Closing a tab only removes it from the strip; closing the
- * a tab only removes it from the strip; closing the active one activates its
+ * active one activates its neighbour. Ids whose session has not loaded (or
- * neighbour. Ids whose session has not loaded (or was archived/deleted) stay
+ * was archived/deleted) stay in the store but do not render, so a partial
- * in the store but do not render, so a partial session list never destroys
+ * session list never destroys the working set.
- * the working set.
  */
 export const SessionTabsStrip: React.FC<{
-  /** The header's session menu for the active tab (already a DropdownMenu). */
+  /** Menu items for one tab's session, supplied by the header. */
-  menu?: React.ReactNode;
+  renderMenu: (args: SessionTabMenuArgs) => React.ReactNode;
-  /** Whether that menu is open, so the hover overlay stays visible. */
+  /** Fires when a tab menu finishes opening/closing (deferred rename hook). */
-  menuOpen?: boolean;
+  onMenuOpenChangeComplete?: (open: boolean) => void;
   children: React.ReactNode;
-}> = ({ menu = null, menuOpen = false, children }) => {
+}> = ({ renderMenu, onMenuOpenChangeComplete, children }) => {
   const { t } = useI18n();
   const tabIds = useSessionTabsStore((state) => state.tabIds);
   const ensureTab = useSessionTabsStore((state) => state.ensureTab);
@@ -330,32 +299,6 @@ export const SessionTabsStrip: React.FC<{
 
   const tabIdsInOrder = React.useMemo(() => tabs.map((tab) => tab.id), [tabs]);
 
-  const renderTab = (tab: SessionTab) => {
-    if (tab.id === currentSessionId) {
-      return (
-        <ActiveTabShell
-          key={tab.id}
-          id={tab.id}
-          menu={menu}
-          menuOpen={menuOpen}
-          onClose={() => handleClose(tab.id)}
-          closeLabel={t('header.sessionTabs.closeTab')}
-        >
-          {children}
-        </ActiveTabShell>
-      );
-    }
-    return (
-      <InactiveSessionTab
-        key={tab.id}
-        tab={tab}
-        onSelect={handleSelect}
-        onClose={handleClose}
-        onCloseOthers={handleCloseOthers}
-      />
-    );
-  };
-
   // A brand-new draft (no session yet) shows as a transient active pill after
   // the tabs; it becomes a real tab once the first message creates the session.
   const showDraftPill = !currentSessionId || !tabs.some((tab) => tab.id === currentSessionId);
@@ -365,7 +308,7 @@ export const SessionTabsStrip: React.FC<{
       <div
         ref={scrollRef}
         onScroll={updateEdges}
-        className="flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto overscroll-x-contain [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+        className="session-tabs-scroll flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto overscroll-x-contain"
         style={maskImage ? { maskImage, WebkitMaskImage: maskImage } : undefined}
       >
         <DndContext
@@ -375,7 +318,20 @@ export const SessionTabsStrip: React.FC<{
           onDragEnd={handleDragEnd}
         >
           <SortableContext items={tabIdsInOrder} strategy={horizontalListSortingStrategy}>
-            {tabs.map(renderTab)}
+            {tabs.map((tab) => (
+              <SessionTabItem
+                key={tab.id}
+                tab={tab}
+                isActive={tab.id === currentSessionId}
+                onSelect={handleSelect}
+                onClose={handleClose}
+                renderMenu={renderMenu}
+                closeOtherTabs={handleCloseOthers}
+                onMenuOpenChangeComplete={onMenuOpenChangeComplete}
+              >
+                {tab.id === currentSessionId ? children : null}
+              </SessionTabItem>
+            ))}
           </SortableContext>
         </DndContext>
         {showDraftPill ? (

packages/ui/src/index.css

@@ -1803,3 +1803,15 @@ html.desktop-runtime .markdown-content [data-openchamber-file-link="true"] {
 .session-tab-slot:not([data-active='true']):hover + .session-tab-slot::before {
   display: none;
 }
+
+/* Header session tabs scroller: never show a scrollbar (it shifts the header
+   content vertically); overflow is communicated by the edge fades. */
+.session-tabs-scroll {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.session-tabs-scroll::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}