feat: version control

src/frontend/components/_atoms/generic-table-inputs/generic-combobox-cell.tsx

@@ -70,6 +70,7 @@ export const GenericComboboxCell = ({
         inputRef.current?.focus()
       }, 0)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectIsOpen, inputValue])
 
   const isButtonDisabled =
@@ -106,7 +107,7 @@ export const GenericComboboxCell = ({
         }
         return result
       },
-    [selectValues],
+    [],
   )
 
   // Helper to filter options/groups recursively (moved out for reuse)
@@ -134,14 +135,17 @@ export const GenericComboboxCell = ({
   }
 
   // Flatten filtered options for navigation
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const filteredOptions = useMemo(() => filterOptions(selectValues, inputValue), [selectValues, inputValue])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const flatFilteredOptions = useMemo(() => flattenOptions(filteredOptions), [filteredOptions])
 
   // Reset highlight only when dropdown is first opened
   useEffect(() => {
     if (selectIsOpen) {
       setHighlightedIndex(flatFilteredOptions.findIndex((opt) => opt.value === value))
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectIsOpen])
 
   // Scroll highlighted option into view

src/frontend/components/_atoms/generic-table-inputs/generic-select-cell.tsx

@@ -36,6 +36,7 @@ export const GenericSelectCell = ({
 
   useEffect(() => {
     scrollToSelectedOption(selectRef, selectIsOpen)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectIsOpen])
 
   return (

src/frontend/components/_features/[workspace]/branches/branch-status-bar.tsx

@@ -1,10 +1,9 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 
 import type { Branch } from '../../../../../middleware/shared/ports/version-control-port'
-import { useVersionControl } from '../../../../../middleware/shared/providers'
+import { useNavigation, useVersionControl } from '../../../../../middleware/shared/providers'
 import { useActiveBranch } from '../../../../hooks/use-active-branch'
-import { BranchSwitcherModal } from './branch-switcher-modal'
-import { CreateBranchModal } from './create-branch-modal'
+import { BranchSwitcherPopover } from './branch-switcher-popover'
 import { DeleteBranchModal } from './delete-branch-modal'
 import { UnsavedChangesWarningModal } from './unsaved-changes-warning-modal'
 
@@ -15,10 +14,11 @@
 
 export function BranchStatusBar({ projectId, onBranchSwitch }: BranchStatusBarProps) {
   const versionControl = useVersionControl()
+  const navigation = useNavigation()
   const [activeBranchName, setActiveBranch] = useActiveBranch(projectId)
+  const branchButtonRef = useRef<HTMLButtonElement>(null)
 
   const [showSwitcher, setShowSwitcher] = useState(false)
-  const [showCreate, setShowCreate] = useState(false)
   const [showDelete, setShowDelete] = useState(false)
   const [showUnsavedWarning, setShowUnsavedWarning] = useState(false)
   const [branchToDelete, setBranchToDelete] = useState<Branch | null>(null)
@@ -80,6 +80,20 @@
     setShowDelete(true)
   }, [])
 
+  const handleMerge = useCallback(
+    (branch: Branch) => {
+      // Source is the clicked branch; default target to the active branch
+      // (if different). When source == active, omit `target` entirely so the
+      // merge page can apply its own default rather than receiving `target=`.
+      navigation.navigate('/merge', {
+        project_id: projectId,
+        source: branch.name,
+        target: activeBranchName !== branch.name ? activeBranchName : undefined,
+      })
+    },
+    [projectId, activeBranchName, navigation],
+  )
+
   const handleDeleted = useCallback(() => {
     if (!versionControl) return
     if (branchToDelete?.name === activeBranchName) {
@@ -101,6 +115,7 @@
     <>
       <div className='flex h-6 w-full shrink-0 items-center bg-brand-dark px-2 dark:bg-neutral-950'>
         <button
+          ref={branchButtonRef}
           onClick={() => setShowSwitcher(true)}
           className='flex items-center gap-1.5 rounded-sm px-2 py-0.5 text-xs text-white transition-colors hover:bg-brand-medium-dark dark:text-neutral-400 dark:hover:bg-neutral-900'
           title='Switch branch'
@@ -112,18 +127,17 @@
         </button>
       </div>
 
-      <BranchSwitcherModal
+      <BranchSwitcherPopover
         isOpen={showSwitcher}
         projectId={projectId}
         currentBranchName={activeBranchName}
+        anchorRef={branchButtonRef}
         onClose={() => setShowSwitcher(false)}
         onSelect={handleSelect}
-        onCreateNew={() => setShowCreate(true)}
         onDelete={handleDelete}
+        onMerge={handleMerge}
       />
 
-      <CreateBranchModal isOpen={showCreate} projectId={projectId} onClose={() => setShowCreate(false)} />
-
       <DeleteBranchModal
         isOpen={showDelete}
         projectId={projectId}