feat(session): enhance BranchPickerDialog with improved layout and new worktree session description

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

@@ -4,6 +4,7 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogDescription,
 } from '@/components/ui/dialog';
 
 import { Input } from '@/components/ui/input';
@@ -136,9 +137,15 @@ export function BranchPickerDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-xl max-h-[80vh] flex flex-col overflow-hidden gap-3">
+      <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden gap-3">
         <DialogHeader className="flex-shrink-0">
-          <DialogTitle>Branches & Worktrees</DialogTitle>
+          <DialogTitle className="flex items-center gap-2">
+            <RiGitBranchLine className="h-5 w-5" />
+            Branches & Worktrees
+          </DialogTitle>
+          <DialogDescription>
+            Start a new worktree session from any local branch
+          </DialogDescription>
         </DialogHeader>
 
         <div className="relative flex-shrink-0">
@@ -152,7 +159,7 @@ export function BranchPickerDialog({
         </div>
 
         <div className="flex-1 min-h-0 overflow-y-auto">
-          <div className="space-y-2">
+          <div className="space-y-1">
             {gitRepoProjects.length === 0 ? (
               <div className="text-center py-8 text-muted-foreground">
                 No git repositories found
@@ -172,11 +179,11 @@ export function BranchPickerDialog({
                   .filter(b => !worktreeBranches.has(b));
 
                 return (
-                  <div key={project.id} className="rounded-lg border">
+                  <div key={project.id} className="rounded-md">
                     <button
                       type="button"
                       onClick={() => toggleProject(project.id)}
-                      className="w-full flex items-center gap-2 p-3 hover:bg-muted/50 transition-colors rounded-t-lg"
+                      className="w-full flex items-center gap-2 px-2.5 py-1.5 hover:bg-muted/30 transition-colors rounded-md"
                     >
                       <RiArrowRightSLine
                         className={cn(
@@ -197,24 +204,22 @@ export function BranchPickerDialog({
                         </span>
                       )}
                     </button>
-
                     {isExpanded && (
-                      <div className="border-t">
+                      <div className="mt-1 space-y-1 pl-6">
                         {data?.loading ? (
-                          <div className="p-4 text-center text-muted-foreground text-sm">
+                          <div className="px-2 py-2 text-muted-foreground text-sm">
                             Loading branches...
                           </div>
                         ) : data?.error ? (
-                          <div className="p-4 text-center text-destructive text-sm">
+                          <div className="px-2 py-2 text-destructive text-sm">
                             {data.error}
                           </div>
                         ) : localBranches.length === 0 ? (
-                          <div className="p-4 text-center text-muted-foreground text-sm">
+                          <div className="px-2 py-2 text-muted-foreground text-sm">
                             {searchQuery ? 'No matching branches' : 'No branches found'}
                           </div>
                         ) : (
-                          <div className="divide-y overflow-hidden">
+                          localBranches.map((branchName) => {
-                            {localBranches.map((branchName) => {
                             const branchDetails = branches?.branches[branchName];
                             const isCurrent = branchDetails?.current;
                             const isCreating = creatingWorktree === `${project.id}:${branchName}`;
@@ -222,7 +227,7 @@ export function BranchPickerDialog({
                             return (
                               <div
                                 key={branchName}
-                                  className="flex items-center gap-2 px-3 py-2 hover:bg-muted/30 overflow-hidden"
+                                className="flex items-center gap-2 px-2.5 py-1.5 hover:bg-muted/30 rounded-md overflow-hidden"
                               >
                                 <RiGitBranchLine className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                                 <div className="flex-1 min-w-0 overflow-hidden">
@@ -282,8 +287,7 @@ export function BranchPickerDialog({
                                 </Tooltip>
                               </div>
                             );
-                            })}
+                          })
-                          </div>
                         )}
                       </div>
                     )}

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

@@ -176,6 +176,8 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
     isDragging,
   } = useSortable({ id });
 
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+
   return (
     <div ref={setNodeRef} className={cn('relative', isDragging && 'opacity-40')}>
       {/* Sentinel for sticky detection */}
@@ -191,7 +193,7 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
       {/* Project header - sticky like workspace groups */}
       <div
         className={cn(
-          'sticky top-0 z-10 pt-2 pb-1.5 w-full text-left cursor-pointer group/project border-b',
+          'sticky top-0 z-10 pt-2 pb-1.5 w-full text-left cursor-pointer group/project border-b select-none',
           !isDesktopRuntime && 'bg-sidebar',
         )}
         style={{
@@ -206,6 +208,10 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
         }}
         onMouseEnter={() => onHoverChange(true)}
         onMouseLeave={() => onHoverChange(false)}
+        onContextMenu={(event) => {
+          event.preventDefault();
+          setIsMenuOpen(true);
+        }}
       >
         <div className="relative flex items-center gap-1 px-1" {...attributes}>
           {/* Project name with tooltip for path - draggable */}
@@ -231,7 +237,10 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
           </Tooltip>
 
           {/* Project menu */}
-          <DropdownMenu>
+          <DropdownMenu
+            open={isMenuOpen}
+            onOpenChange={setIsMenuOpen}
+          >
             <DropdownMenuTrigger asChild>
               <button
                 type="button"
@@ -246,6 +255,24 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="min-w-[180px]">
+              {isRepo && !hideDirectoryControls && settingsAutoCreateWorktree && onNewSession && (
+                <DropdownMenuItem onClick={onNewSession}>
+                  <RiAddLine className="mr-1.5 h-4 w-4" />
+                  New Session
+                </DropdownMenuItem>
+              )}
+              {isRepo && !hideDirectoryControls && !settingsAutoCreateWorktree && onNewWorktreeSession && (
+                <DropdownMenuItem onClick={onNewWorktreeSession}>
+                  <RiGitBranchLine className="mr-1.5 h-4 w-4" />
+                  New Session in Worktree
+                </DropdownMenuItem>
+              )}
+              {isRepo && !hideDirectoryControls && onOpenBranchPicker && (
+                <DropdownMenuItem onClick={onOpenBranchPicker}>
+                  <RiGitRepositoryLine className="mr-1.5 h-4 w-4" />
+                  Browse Branches
+                </DropdownMenuItem>
+              )}
               {isRepo && !hideDirectoryControls && (
                 <DropdownMenuItem onClick={onOpenMultiRunLauncher}>
                   <ArrowsMerge className="mr-1.5 h-4 w-4" />
@@ -262,7 +289,7 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
             </DropdownMenuContent>
           </DropdownMenu>
 
-          {isRepo && !hideDirectoryControls && onNewWorktreeSession && !settingsAutoCreateWorktree && (
+          {isRepo && !hideDirectoryControls && onNewWorktreeSession && settingsAutoCreateWorktree && (
             <Tooltip>
               <TooltipTrigger asChild>
                 <button
@@ -272,8 +299,8 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
                     onNewWorktreeSession();
                   }}
                   className={cn(
-                    'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 hover:text-foreground flex-shrink-0',
+                    'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 hover:text-foreground flex-shrink-0',
-                    mobileVariant ? 'opacity-70' : 'opacity-0 group-hover/project:opacity-100',
+                    mobileVariant ? 'opacity-70' : 'opacity-100',
                   )}
                   aria-label="New session in worktree"
                 >
@@ -285,29 +312,7 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
               </TooltipContent>
             </Tooltip>
           )}
-          {isRepo && !hideDirectoryControls && onOpenBranchPicker && (
+          {(!settingsAutoCreateWorktree || !isRepo) && (
-            <Tooltip delayDuration={700}>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onOpenBranchPicker();
-                  }}
-                  className={cn(
-                    'inline-flex h-6 w-6 items-center justify-center text-muted-foreground hover:text-foreground flex-shrink-0 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
-                    mobileVariant ? 'opacity-70' : 'opacity-0 group-hover/project:opacity-100',
-                  )}
-                  aria-label="Browse branches"
-                >
-                  <RiGitRepositoryLine className="h-4 w-4" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom" sideOffset={4}>
-                <p>Browse branches</p>
-              </TooltipContent>
-            </Tooltip>
-          )}
             <Tooltip>
               <TooltipTrigger asChild>
                 <button
@@ -326,6 +331,7 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
                 <p>New session</p>
               </TooltipContent>
             </Tooltip>
+          )}
         </div>
       </div>
 
@@ -357,9 +363,6 @@ const ProjectDragOverlay: React.FC<ProjectDragOverlayProps> = ({
         )}>
           {projectLabel}
         </span>
-        <span className="inline-flex h-6 w-6 items-center justify-center text-muted-foreground ml-auto">
-          <RiAddLine className="h-4 w-4" />
-        </span>
       </div>
     </div>
   );
@@ -1605,11 +1608,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                       if (mobileVariant) {
                         setSessionSwitcherOpen(false);
                       }
-                      if (settingsAutoCreateWorktree && isRepo) {
-                        createWorktreeSession();
-                      } else {
                       openNewSessionDraft({ directoryOverride: project.normalizedPath });
-                      }
                     }}
                     onNewWorktreeSession={() => {
                       if (projectKey !== activeProjectId) {