@brimveyn/aimux 1.14.15 → 1.14.16

package/src/ui/components/layout/top-tab-bar.tsx

@@ -1,6 +1,10 @@
-import type { MouseEvent as OtuiMouseEvent, ScrollBoxRenderable } from '@opentui/core'
+import type {
+  BoxRenderable,
+  MouseEvent as OtuiMouseEvent,
+  ScrollBoxRenderable,
+} from '@opentui/core'
 
-import { memo, type ReactNode, useCallback, useMemo, useRef } from 'react'
+import { memo, type ReactNode, useCallback, useMemo, useRef, useState } from 'react'
 
 import type { FocusMode, TabSession } from '../../../state/types'
 
@@ -8,7 +12,8 @@ import { useWorktreeDivergencePolling } from '../../../git/worktree-divergence-p
 import { useAppStore } from '../../../state/app-store'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref'
 import { filterTabsForActiveWorktree } from '../../../state/session-worktrees'
-import { buildTabEntries, type GroupEntry } from '../../../state/tab-entries'
+import { buildTabEntries, type GroupEntry, type TabEntry } from '../../../state/tab-entries'
+import { moveIdToIdPosition } from '../../session-ordering'
 import { useTheme } from '../../theme'
 import { ContextMenuBox } from '../overlays/context-menu/context-menu-box'
 import { TabItem } from './sidebar/tab-item'
@@ -43,27 +48,51 @@ const TopTabCell = memo(function TopTabCell({
   backgroundColor,
   children,
   entryId,
-  onActivate,
+  onDrag,
+  onDragCancel,
+  onDragStart,
+  onDrop,
+  setCellRef,
 }: {
   entryId: string
   active: boolean
   backgroundColor: string | undefined
-  onActivate?: (entryId: string) => void
+  setCellRef: (entryId: string, ref: BoxRenderable | null) => void
+  onDragStart: (entryId: string) => void
+  onDrag: (event: OtuiMouseEvent) => void
+  onDrop: () => void
+  onDragCancel: () => void
   children: ReactNode
 }) {
+  const handleRef = useCallback(
+    (r: BoxRenderable | null) => setCellRef(entryId, r),
+    [setCellRef, entryId]
+  )
   const handleMouseDown = useCallback(
     (event: OtuiMouseEvent) => {
+      event.preventDefault()
       event.stopPropagation()
-      onActivate?.(entryId)
+      onDragStart(entryId)
+    },
+    [onDragStart, entryId]
+  )
+  const handleMouseUp = useCallback(
+    (event: OtuiMouseEvent) => {
+      event.preventDefault()
+      onDrop()
     },
-    [onActivate, entryId]
+    [onDrop]
   )
   return (
     <box
+      ref={handleRef}
       backgroundColor={backgroundColor}
       flexDirection="row"
       flexShrink={0}
       onMouseDown={handleMouseDown}
+      onMouseDrag={onDrag}
+      onMouseUp={handleMouseUp}
+      onMouseDragEnd={onDragCancel}
       data-active={active ? 'true' : undefined}
     >
       {children}
@@ -147,6 +176,19 @@ function GroupTabItem({
   )
 }
 
+function arraysEqual(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) return false
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false
+  }
+  return true
+}
+
+/** Flatten an entry into the underlying tab ids, in display order. */
+function entryTabIds(entry: TabEntry): string[] {
+  return entry.kind === 'single' ? [entry.tab.id] : entry.tabs.map((tab) => tab.id)
+}
+
 export function TopTabBar({ forceVisible = false }: TopTabBarProps) {
   const t = useTheme()
   const headerBg = t.backgroundPanel
@@ -214,6 +256,89 @@ export function TopTabBar({ forceVisible = false }: TopTabBarProps) {
     [entries, activeTabId]
   )
 
+  // --- Drag-and-drop reorder of the tab strip ---------------------------------
+  // Mirrors the workspace-list drag, but on the horizontal axis: entries are
+  // laid out left-to-right inside a scrollX box, so hit-testing is on x/width.
+  const [draggingId, setDraggingId] = useState<string | null>(null)
+  const [dragOrder, setDragOrder] = useState<string[] | null>(null)
+  const lastSwapWithRef = useRef<string | null>(null)
+  const cellRefs = useRef(new Map<string, BoxRenderable>())
+
+  const baselineOrder = useMemo(() => entries.map((e) => e.id), [entries])
+
+  const setCellRef = useCallback((id: string, ref: BoxRenderable | null): void => {
+    if (ref) cellRefs.current.set(id, ref)
+    else cellRefs.current.delete(id)
+  }, [])
+
+  const findEntryAtX = useCallback((x: number): string | null => {
+    for (const [id, ref] of cellRefs.current) {
+      if (x >= ref.x && x < ref.x + ref.width) return id
+    }
+    return null
+  }, [])
+
+  const handleDragStart = useCallback(
+    (id: string) => {
+      setDraggingId(id)
+      setDragOrder(baselineOrder)
+      lastSwapWithRef.current = null
+    },
+    [baselineOrder]
+  )
+
+  const handleDrag = useCallback(
+    (event: OtuiMouseEvent) => {
+      if (!(draggingId != null && draggingId !== '')) return
+      const hit = findEntryAtX(event.x)
+      if (hit === null || hit === draggingId) {
+        lastSwapWithRef.current = null
+        return
+      }
+      if (hit === lastSwapWithRef.current) return
+      setDragOrder((prev) => (prev ? moveIdToIdPosition(prev, draggingId, hit) : prev))
+      lastSwapWithRef.current = hit
+    },
+    [draggingId, findEntryAtX]
+  )
+
+  const commitDrop = useCallback(() => {
+    const source = draggingId
+    const finalOrder = dragOrder
+    setDraggingId(null)
+    setDragOrder(null)
+    lastSwapWithRef.current = null
+
+    if (source == null || source === '' || !finalOrder) return
+
+    if (!arraysEqual(finalOrder, baselineOrder)) {
+      // Expand entries (groups collapse multiple tabs) back into a flat tab-id
+      // order, then let the reducer rewrite only the visible tabs' slots.
+      const byId = new Map(entries.map((e) => [e.id, e]))
+      const orderedTabIds = finalOrder.flatMap((id) => {
+        const entry = byId.get(id)
+        return entry ? entryTabIds(entry) : []
+      })
+      dispatchGlobal({ orderedTabIds, type: 'reorder-tabs' })
+      return
+    }
+
+    // No reorder happened → treat as a plain click on the entry.
+    handleEntryActivate(source)
+  }, [baselineOrder, dragOrder, draggingId, entries, handleEntryActivate])
+
+  const cancelDrag = useCallback(() => {
+    setDraggingId(null)
+    setDragOrder(null)
+    lastSwapWithRef.current = null
+  }, [])
+
+  const visibleEntries = useMemo(() => {
+    if (dragOrder === null) return entries
+    const byId = new Map(entries.map((e) => [e.id, e]))
+    return dragOrder.map((id) => byId.get(id)).filter((e): e is TabEntry => e != null)
+  }, [dragOrder, entries])
+
   const handleNewTab = useCallback((e: OtuiMouseEvent) => {
     e.stopPropagation()
     dispatchGlobal({ type: 'open-new-tab-modal' })
@@ -245,10 +370,11 @@ export function TopTabBar({ forceVisible = false }: TopTabBarProps) {
         viewportCulling
         contentOptions={ROW_CONTENT_OPTIONS}
       >
-        {entries.map((entry, index) => {
+        {visibleEntries.map((entry, index) => {
           // [N] is shown only for the first 9 entries — that's the range
           // Leader+1..9 can address.
           const indexLabel = index < 9 ? `[${index + 1}]` : undefined
+          const dragging = entry.id === draggingId
           if (entry.kind === 'single') {
             const tab: TabSession = entry.tab
             const isActive = tab.id === activeTabId
@@ -257,8 +383,12 @@ export function TopTabBar({ forceVisible = false }: TopTabBarProps) {
                 key={entry.id}
                 entryId={entry.id}
                 active={isActive}
-                onActivate={handleEntryActivate}
-                backgroundColor={isActive ? t.backgroundElement : undefined}
+                setCellRef={setCellRef}
+                onDragStart={handleDragStart}
+                onDrag={handleDrag}
+                onDrop={commitDrop}
+                onDragCancel={cancelDrag}
+                backgroundColor={isActive || dragging ? t.backgroundElement : undefined}
               >
                 <TabItem
                   id={`top-tab-${tab.id}`}
@@ -277,8 +407,12 @@ export function TopTabBar({ forceVisible = false }: TopTabBarProps) {
               key={entry.id}
               entryId={entry.id}
               active={isActive}
-              onActivate={handleEntryActivate}
-              backgroundColor={isActive ? t.backgroundElement : undefined}
+              setCellRef={setCellRef}
+              onDragStart={handleDragStart}
+              onDrag={handleDrag}
+              onDrop={commitDrop}
+              onDragCancel={cancelDrag}
+              backgroundColor={isActive || dragging ? t.backgroundElement : undefined}
             >
               <GroupTabItem
                 entry={entry}

package/src/ui/components/modals/shared/worktree-delete-confirm.tsx

@@ -0,0 +1,39 @@
+import type { ModeId } from '@brimveyn/aimux-config'
+
+import { useTheme } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { Form } from './form'
+
+interface WorktreeDeleteConfirmProps {
+  keybindsModeId: ModeId
+  reason: string
+  worktreeLabel: string
+}
+
+/**
+ * Shared confirmation dialog for a recoverable worktree delete. Used both inside
+ * the new-tab picker and as a standalone modal (sidebar "Remove worktree"); the
+ * keybinds mode wires Enter/y to confirm and Esc/n to cancel for each context.
+ */
+export function WorktreeDeleteConfirm({
+  keybindsModeId,
+  reason,
+  worktreeLabel,
+}: WorktreeDeleteConfirmProps) {
+  const t = useTheme()
+  return (
+    <Form
+      title="Delete worktree?"
+      keybindsModeId={keybindsModeId}
+      width={uiTokens.modalWidth.md}
+      footer={<text fg={t.textMuted}>Enter / y to delete · Esc / n to cancel</text>}
+    >
+      <box flexDirection="column" gap={1}>
+        <text fg={t.text}>
+          Delete <strong>{worktreeLabel}</strong>?
+        </text>
+        <text fg={t.warning}>{reason}</text>
+      </box>
+    </Form>
+  )
+}

package/src/ui/components/modals/tabs/new-tab-modal.tsx

@@ -5,11 +5,16 @@ import type { AssistantId, WorktreeRecord } from '../../../../state/types'
 
 import { getAllAssistantOptions, getAssistantOption } from '../../../../pty/command-registry'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
-import { filterAssistants, getTemplateNoneOffset } from '../../../../state/selectors'
+import {
+  buildBaseRefOptions,
+  filterAssistants,
+  getTemplateNoneOffset,
+} from '../../../../state/selectors'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
-import { Form, TextField } from '../shared/form'
+import { AutoComplete, Form, type FormOptionItem, TextField } from '../shared/form'
 import { Picker, type PickerItem } from '../shared/picker'
+import { WorktreeDeleteConfirm } from '../shared/worktree-delete-confirm'
 
 interface NewTabModalProps {
   selectedIndex: number
@@ -19,16 +24,18 @@ interface NewTabModalProps {
   currentSessionId: string | null
   editingCommand: AssistantId | null
   editBuffer: string
-  activeField: 'assistant' | 'branch-name' | 'target-worktree' | 'worktree-name'
+  activeField: 'assistant' | 'branch-name' | 'target-worktree' | 'worktree-name' | 'base'
   branchError: string | null
   branchName: string
   createWorktree: boolean
   selectedAssistantId: AssistantId | null
   step: 'assistant' | 'worktree' | 'worktree-create' | 'template'
-  worktreeDeleteConfirmId: string | null
-  worktreeDeleteMessage: string | null
+  worktreeDeletePrompt: { worktreeId: string; reason: string } | null
   worktrees: WorktreeRecord[]
   worktreeName: string
+  baseQuery: string
+  baseRef: string
+  baseBranches: string[]
   worktreeTemplates: WorktreeTemplate[]
   /**
    * True when this modal is the worktree-aware new-tab flow. False when the
@@ -63,6 +70,9 @@ function getDeleteBlockedReason({
 export function NewTabModal({
   activeField,
   allowTemplateShortcut,
+  baseBranches,
+  baseQuery,
+  baseRef,
   branchError,
   branchName,
   createWorktree,
@@ -75,8 +85,7 @@ export function NewTabModal({
   selectedAssistantId,
   selectedIndex,
   step,
-  worktreeDeleteConfirmId,
-  worktreeDeleteMessage,
+  worktreeDeletePrompt,
   worktreeName,
   worktrees,
   worktreeTemplates,
@@ -107,9 +116,8 @@ export function NewTabModal({
             active && canDelete && currentSessionId != null && currentSessionId !== ''
               ? () => {
                   dispatchGlobal({ index, type: 'set-modal-selection-index' })
-                  dispatchGlobal({ message: null, type: 'set-new-tab-worktree-delete-state' })
                   runSideEffectGlobal({
-                    force: worktreeDeleteConfirmId === worktree.id,
+                    force: false,
                     sessionId: currentSessionId,
                     type: 'delete-worktree',
                     worktreeId: worktree.id,
@@ -127,12 +135,15 @@ export function NewTabModal({
       }),
       {
         key: '__create-worktree__',
-        onClick: () => dispatchGlobal({ type: 'enter-new-tab-worktree-create' }),
+        onClick: () => {
+          dispatchGlobal({ type: 'enter-new-tab-worktree-create' })
+          runSideEffectGlobal({ type: 'load-new-tab-base-branches' })
+        },
         subtitle: <text fg={t.textMuted}>Create an Aimux temp worktree</text>,
         title: <text fg={createWorktree ? t.text : t.textMuted}>Create new worktree</text>,
       },
     ],
-    [createWorktree, currentSessionId, selectedIndex, t, worktreeDeleteConfirmId, worktrees]
+    [createWorktree, currentSessionId, selectedIndex, t, worktrees]
   )
 
   const noneOffset = getTemplateNoneOffset(selectedAssistantId)
@@ -216,6 +227,24 @@ export function NewTabModal({
     ]
   }, [customCommands, filtered, showShortcutEntry, selectedIndex, t])
 
+  const baseItems = useMemo<FormOptionItem[]>(
+    () =>
+      buildBaseRefOptions(worktrees, baseBranches, baseQuery).map((option) => ({
+        key: option.ref,
+        leading: (
+          <text fg={option.kind === 'worktree' ? t.warning : t.textMuted}>
+            {option.kind === 'worktree' ? '\u{e728}' : '\u{e702}'}
+          </text>
+        ),
+        subtitle:
+          option.kind === 'worktree' ? (
+            <text fg={t.textMuted}>worktree: {option.detail}</text>
+          ) : null,
+        title: (active) => <text fg={active ? t.text : t.textMuted}>{option.label}</text>,
+      })),
+    [baseBranches, baseQuery, t, worktrees]
+  )
+
   if (editingCommand !== null) {
     const option = options.find((o) => o.id === editingCommand) ?? getAssistantOption(0)
     return (
@@ -260,6 +289,7 @@ export function NewTabModal({
   if (step === 'worktree-create') {
     const selectedAssistant =
       options.find((option) => option.id === selectedAssistantId) ?? options[0]
+    const baseActive = activeField === 'base'
     return (
       <Form
         title={`New worktree: ${selectedAssistant?.label ?? 'assistant'}`}
@@ -286,7 +316,20 @@ export function NewTabModal({
               <text fg={t.error}>{branchError}</text>
             ) : null}
           </box>
-          <text fg={t.textMuted}>Step 3/3: configure new worktree</text>
+          <AutoComplete
+            active={baseActive}
+            label="Base (fork from)"
+            placeholder="branch or worktree to fork from..."
+            value={baseQuery}
+            displayValue={baseRef !== '' ? baseRef : 'current branch'}
+            items={baseItems}
+            selectedIndex={selectedIndex}
+            cursorPos={baseActive ? cursorPos : undefined}
+            maxVisibleRows={6}
+            onHover={handleHover}
+            emptyState={<text fg={t.textMuted}>No branches found</text>}
+          />
+          <text fg={t.textMuted}>Step 3/3: configure new worktree · Tab switches fields</text>
         </box>
       </Form>
     )
@@ -297,6 +340,19 @@ export function NewTabModal({
       options.find((option) => option.id === selectedAssistantId) ??
       filtered[selectedIndex] ??
       options[0]
+
+    if (worktreeDeletePrompt != null) {
+      const target = worktrees.find((worktree) => worktree.id === worktreeDeletePrompt.worktreeId)
+      const label = target?.branch ?? target?.name ?? 'this worktree'
+      return (
+        <WorktreeDeleteConfirm
+          keybindsModeId="modal.new-tab.worktree-delete-confirm"
+          reason={worktreeDeletePrompt.reason}
+          worktreeLabel={label}
+        />
+      )
+    }
+
     const selectedWorktree = worktrees[selectedIndex]
     const deleteBlockedReason = getDeleteBlockedReason({
       currentSessionId,
@@ -316,17 +372,8 @@ export function NewTabModal({
         onHover={handleHover}
         footer={
           <box flexDirection="column">
-            {(worktreeDeleteMessage != null && worktreeDeleteMessage !== '') ||
-            (deleteBlockedReason != null && deleteBlockedReason !== '') ? (
-              <text
-                fg={
-                  worktreeDeleteMessage != null && worktreeDeleteMessage !== ''
-                    ? t.error
-                    : t.textMuted
-                }
-              >
-                {worktreeDeleteMessage ?? deleteBlockedReason}
-              </text>
+            {deleteBlockedReason != null && deleteBlockedReason !== '' ? (
+              <text fg={t.textMuted}>{deleteBlockedReason}</text>
             ) : null}
             <text fg={t.textMuted}>Step 2/2: choose worktree</text>
             <text fg={t.textMuted}>Enter launches, Ctrl+d deletes selected worktree</text>

package/src/ui/root.tsx

@@ -34,6 +34,7 @@ import { GitCommitModal } from './components/modals/git/git-commit-modal'
 import { CreateSessionModal } from './components/modals/sessions/create-session-modal'
 import { SessionNameModal } from './components/modals/sessions/session-name-modal'
 import { SessionPickerModal } from './components/modals/sessions/session-picker-modal'
+import { WorktreeDeleteConfirm } from './components/modals/shared/worktree-delete-confirm'
 import { SnippetEditorModal } from './components/modals/snippets/snippet-editor-modal'
 import { SnippetPickerModal } from './components/modals/snippets/snippet-picker-modal'
 import { NewTabModal } from './components/modals/tabs/new-tab-modal'
@@ -46,6 +47,7 @@ import { ToastViewport } from './components/overlays/toast/toast-viewport'
 import { useTheme } from './theme'
 
 const EMPTY_WORKTREES: WorktreeRecord[] = []
+const EMPTY_BASE_BRANCHES: string[] = []
 
 function getCreateSessionFields(modal: ModalState) {
   if (modal.type !== 'create-session') {
@@ -114,8 +116,10 @@ function renderModal(
           createWorktree={modal.type === 'new-tab' ? modal.createWorktree : false}
           selectedAssistantId={modal.type === 'new-tab' ? modal.selectedAssistantId : null}
           step={modal.type === 'new-tab' ? modal.step : 'assistant'}
-          worktreeDeleteConfirmId={modal.type === 'new-tab' ? modal.worktreeDeleteConfirmId : null}
-          worktreeDeleteMessage={modal.type === 'new-tab' ? modal.worktreeDeleteMessage : null}
+          baseQuery={modal.type === 'new-tab' ? modal.baseQuery : ''}
+          baseRef={modal.type === 'new-tab' ? modal.baseRef : ''}
+          baseBranches={modal.type === 'new-tab' ? modal.baseBranches : EMPTY_BASE_BRANCHES}
+          worktreeDeletePrompt={modal.type === 'new-tab' ? modal.worktreeDeletePrompt : null}
           worktrees={
             options.currentSessionId != null && options.currentSessionId !== ''
               ? (options.sessions.find((session) => session.id === options.currentSessionId)
@@ -225,6 +229,14 @@ function renderModal(
       )
     case 'ai-usage':
       return <AIUsageModal />
+    case 'worktree-delete-confirm':
+      return (
+        <WorktreeDeleteConfirm
+          keybindsModeId="modal.worktree-delete-confirm"
+          reason={modal.reason}
+          worktreeLabel={modal.worktreeLabel}
+        />
+      )
     case 'git-commit': {
       const titleText =
         modal.activeField === 'title' ? (modal.editBuffer ?? '') : modal.contentBuffer