@brimveyn/aimux 1.14.14 → 1.14.16

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

@@ -1,14 +1,20 @@
 import { useCallback, useMemo } from 'react'
 
+import type { WorktreeTemplate } from '../../../../config'
 import type { AssistantId, WorktreeRecord } from '../../../../state/types'
 
 import { getAllAssistantOptions, getAssistantOption } from '../../../../pty/command-registry'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
-import { filterAssistants } 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
@@ -18,18 +24,29 @@ 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'
-  worktreeDeleteConfirmId: string | null
-  worktreeDeleteMessage: string | null
+  step: 'assistant' | 'worktree' | 'worktree-create' | 'template'
+  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
+   * component is reused for `split-picker`, which can only choose an
+   * assistant — the template shortcut entry must be hidden there.
+   */
+  allowTemplateShortcut: boolean
 }
 
+const TEMPLATE_SHORTCUT_KEY = '__template-shortcut__'
+
 function getDeleteBlockedReason({
   currentSessionId,
   worktree,
@@ -52,6 +69,10 @@ function getDeleteBlockedReason({
 
 export function NewTabModal({
   activeField,
+  allowTemplateShortcut,
+  baseBranches,
+  baseQuery,
+  baseRef,
   branchError,
   branchName,
   createWorktree,
@@ -64,10 +85,10 @@ export function NewTabModal({
   selectedAssistantId,
   selectedIndex,
   step,
-  worktreeDeleteConfirmId,
-  worktreeDeleteMessage,
+  worktreeDeletePrompt,
   worktreeName,
   worktrees,
+  worktreeTemplates,
 }: NewTabModalProps) {
   const t = useTheme()
   const options = useMemo(() => getAllAssistantOptions(customCommands), [customCommands])
@@ -95,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,
@@ -115,37 +135,114 @@ 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 items = useMemo<PickerItem[]>(
-    () =>
-      filtered.map((option, index) => {
-        const active = index === selectedIndex
-        const customCmd = customCommands[option.id]
+  const noneOffset = getTemplateNoneOffset(selectedAssistantId)
+  const showNoneOption = noneOffset === 1
+  const templateItems = useMemo<PickerItem[]>(() => {
+    const noneItem: PickerItem[] = showNoneOption
+      ? [
+          {
+            key: '__none__',
+            onClick: () => {
+              dispatchGlobal({ index: 0, type: 'set-modal-selection-index' })
+              runSideEffectGlobal({ type: 'launch-selected-assistant' })
+            },
+            subtitle: <text fg={t.textMuted}>Single pane — current assistant only</text>,
+            title: <text fg={selectedIndex === 0 ? t.text : t.textMuted}>None</text>,
+          },
+        ]
+      : []
+    return [
+      ...noneItem,
+      ...worktreeTemplates.map((template, idx) => {
+        const itemIndex = idx + noneOffset
+        const active = itemIndex === selectedIndex
+        const tabCount = template.tabs.length
+        const paneCount = template.tabs.reduce((sum, tab) => sum + tab.panes.length, 0)
         return {
-          key: option.id,
-          onClick: () =>
-            dispatchGlobal({ assistantId: option.id, type: 'select-new-tab-assistant' }),
-          onEdit: () =>
-            dispatchGlobal({ assistantId: option.id, type: 'open-edit-custom-command' }),
-          subtitle: (
-            <box flexDirection="column">
-              <text fg={t.textMuted}>{option.description}</text>
-              {customCmd != null && customCmd !== '' ? (
-                <text fg={t.primary}>{customCmd}</text>
-              ) : null}
-            </box>
-          ),
-          title: <text fg={active ? t.text : t.textMuted}>{option.label}</text>,
+          key: template.id,
+          onClick: () => {
+            dispatchGlobal({ index: itemIndex, type: 'set-modal-selection-index' })
+            runSideEffectGlobal({ type: 'launch-selected-assistant' })
+          },
+          subtitle:
+            template.description != null && template.description !== '' ? (
+              <text fg={t.textMuted}>{template.description}</text>
+            ) : (
+              <text fg={t.textMuted}>
+                {tabCount} tab{tabCount === 1 ? '' : 's'}, {paneCount} pane
+                {paneCount === 1 ? '' : 's'}
+              </text>
+            ),
+          title: <text fg={active ? t.text : t.textMuted}>{template.name}</text>,
         }
       }),
-    [customCommands, filtered, selectedIndex, t]
+    ]
+  }, [noneOffset, selectedIndex, showNoneOption, t, worktreeTemplates])
+
+  const showShortcutEntry = allowTemplateShortcut && worktreeTemplates.length > 0
+  const items = useMemo<PickerItem[]>(() => {
+    const assistantItems: PickerItem[] = filtered.map((option, index) => {
+      const active = index === selectedIndex
+      const customCmd = customCommands[option.id]
+      return {
+        key: option.id,
+        onClick: () => dispatchGlobal({ assistantId: option.id, type: 'select-new-tab-assistant' }),
+        onEdit: () => dispatchGlobal({ assistantId: option.id, type: 'open-edit-custom-command' }),
+        subtitle: (
+          <box flexDirection="column">
+            <text fg={t.textMuted}>{option.description}</text>
+            {customCmd != null && customCmd !== '' ? <text fg={t.primary}>{customCmd}</text> : null}
+          </box>
+        ),
+        title: <text fg={active ? t.text : t.textMuted}>{option.label}</text>,
+      }
+    })
+    if (!showShortcutEntry) return assistantItems
+    const shortcutIndex = filtered.length
+    const shortcutActive = shortcutIndex === selectedIndex
+    return [
+      ...assistantItems,
+      {
+        key: TEMPLATE_SHORTCUT_KEY,
+        onClick: () => {
+          dispatchGlobal({ index: shortcutIndex, type: 'set-modal-selection-index' })
+          dispatchGlobal({ type: 'enter-new-tab-template-shortcut' })
+        },
+        subtitle: (
+          <text fg={t.textMuted}>Create a worktree and pick a template — no assistant step</text>
+        ),
+        title: <text fg={shortcutActive ? t.text : t.textMuted}>Worktree from template…</text>,
+      },
+    ]
+  }, [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) {
@@ -167,9 +264,32 @@ export function NewTabModal({
     )
   }
 
+  if (step === 'template') {
+    return (
+      <Picker
+        title="Pick worktree template"
+        keybindsModeId="modal.new-tab.command-edit"
+        width={uiTokens.modalWidth.md}
+        gap={1}
+        filter={null}
+        items={templateItems}
+        selectedIndex={selectedIndex}
+        emptyState={<text fg={t.textMuted}>No templates configured.</text>}
+        onHover={handleHover}
+        footer={
+          <box flexDirection="column">
+            <text fg={t.textMuted}>Step 4/4: choose template</text>
+            <text fg={t.textMuted}>Enter launches, Esc returns to worktree settings</text>
+          </box>
+        }
+      />
+    )
+  }
+
   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'}`}
@@ -196,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>
     )
@@ -207,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,
@@ -226,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

@@ -3,6 +3,7 @@ import type { MouseEvent } from '@opentui/core'
 import { useCallback, useMemo } from 'react'
 
 import type { MeasuredPaneRect } from '../app-runtime/use-pane-size-report'
+import type { WorktreeTemplate } from '../config'
 import type { TerminalContentOrigin } from '../input/raw-input-handler'
 import type {
   FocusMode,
@@ -33,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'
@@ -45,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') {
@@ -92,6 +95,7 @@ function renderModal(
     activeAssistant?: string
     autoCommitModel?: string
     worktreeDivergence: Record<string, { ahead: number; behind: number }>
+    worktreeTemplates: WorktreeTemplate[]
   }
 ) {
   switch (modal.type) {
@@ -112,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)
@@ -121,6 +127,8 @@ function renderModal(
               : EMPTY_WORKTREES
           }
           worktreeName={modal.type === 'new-tab' ? modal.worktreeName : ''}
+          worktreeTemplates={options.worktreeTemplates}
+          allowTemplateShortcut={modal.type === 'new-tab'}
         />
       )
     case 'session-picker':
@@ -221,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
@@ -316,6 +332,7 @@ export function RootView({
   const sessions = useAppStore((s) => s.sessions)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const worktreeDivergence = useAppStore((s) => s.worktreeDivergence)
+  const worktreeTemplates = useAppStore((s) => s.worktreeTemplates)
   const gitPaneMode = useAppStore((s) => s.gitPane.mode)
   const gitPaneVisible = useAppStore((s) => s.gitPane.visible)
   const gitPanePosition = useAppStore((s) => s.gitPane.position)
@@ -410,6 +427,7 @@ export function RootView({
           snippets,
           themeId,
           worktreeDivergence,
+          worktreeTemplates,
         })}
         <ToastViewport />
       </box>
@@ -507,6 +525,7 @@ export function RootView({
         snippets,
         themeId,
         worktreeDivergence,
+        worktreeTemplates,
       })}
       <ToastViewport />
     </box>