@brimveyn/aimux 1.12.6 → 1.13.2

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

@@ -1,4 +1,6 @@
-import type { AssistantId } from '../../../../state/types'
+import { useCallback, useMemo } from 'react'
+
+import type { AssistantId, WorktreeRecord } from '../../../../state/types'
 
 import { getAllAssistantOptions, getAssistantOption } from '../../../../pty/command-registry'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
@@ -13,24 +15,141 @@ interface NewTabModalProps {
   customCommands: Record<string, string>
   filter: string | null
   cursorPos?: number
+  currentSessionId: string | null
   editingCommand: AssistantId | null
   editBuffer: string
+  activeField: 'assistant' | 'branch-name' | 'target-worktree' | 'worktree-name'
+  branchError: string | null
+  branchName: string
+  createWorktree: boolean
+  selectedAssistantId: AssistantId | null
+  step: 'assistant' | 'worktree' | 'worktree-create'
+  worktreeDeleteConfirmId: string | null
+  worktreeDeleteMessage: string | null
+  worktrees: WorktreeRecord[]
+  worktreeName: string
+}
+
+function getDeleteBlockedReason({
+  currentSessionId,
+  worktree,
+  worktrees,
+}: {
+  currentSessionId: string | null
+  worktree: WorktreeRecord | undefined
+  worktrees: WorktreeRecord[]
+}): string | null {
+  if (!worktree) return null
+  if (!(currentSessionId != null && currentSessionId !== ''))
+    return 'Cannot delete: no active session.'
+  if (worktrees.length <= 1) return 'Cannot delete: at least one worktree must remain.'
+  if (worktree.source === 'primary') return 'Cannot delete: root worktree is required.'
+  if (worktree.source === 'aimux-temp' && !worktree.createdByAimux) {
+    return 'Cannot delete: this temp worktree was not created by Aimux.'
+  }
+  return null
 }
 
 export function NewTabModal({
+  activeField,
+  branchError,
+  branchName,
+  createWorktree,
+  currentSessionId,
   cursorPos,
   customCommands,
   editBuffer,
   editingCommand,
   filter,
+  selectedAssistantId,
   selectedIndex,
+  step,
+  worktreeDeleteConfirmId,
+  worktreeDeleteMessage,
+  worktreeName,
+  worktrees,
 }: NewTabModalProps) {
   const t = useTheme()
+  const options = useMemo(() => getAllAssistantOptions(customCommands), [customCommands])
+  const filtered = useMemo(() => filterAssistants(options, filter), [filter, options])
+
+  const handleHover = useCallback(
+    (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
+    []
+  )
+
+  const worktreeItems = useMemo<PickerItem[]>(
+    () => [
+      ...worktrees.map((worktree, index) => {
+        const active = index === selectedIndex
+        const label = worktree.branch ?? worktree.name
+        const blockedReason = getDeleteBlockedReason({ currentSessionId, worktree, worktrees })
+        const canDelete = blockedReason == null || blockedReason === ''
+        return {
+          key: worktree.id,
+          onClick: () => {
+            dispatchGlobal({ index, type: 'set-modal-selection-index' })
+            runSideEffectGlobal({ type: 'launch-selected-assistant' })
+          },
+          onDelete:
+            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,
+                    sessionId: currentSessionId,
+                    type: 'delete-worktree',
+                    worktreeId: worktree.id,
+                  })
+                }
+              : undefined,
+          subtitle: (
+            <box flexDirection="column">
+              <text fg={t.textMuted}>{worktree.path}</text>
+              <text fg={t.textMuted}>{worktree.source}</text>
+            </box>
+          ),
+          title: <text fg={active ? t.text : t.textMuted}>{label}</text>,
+        }
+      }),
+      {
+        key: '__create-worktree__',
+        onClick: () => dispatchGlobal({ type: 'enter-new-tab-worktree-create' }),
+        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]
+  )
+
+  const items = useMemo<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>,
+        }
+      }),
+    [customCommands, filtered, selectedIndex, t]
+  )
 
   if (editingCommand !== null) {
-    const option =
-      getAllAssistantOptions(customCommands).find((o) => o.id === editingCommand) ??
-      getAssistantOption(0)
+    const option = options.find((o) => o.id === editingCommand) ?? getAssistantOption(0)
     return (
       <Form
         title={`Edit command — ${option.label}`}
@@ -48,38 +167,103 @@ export function NewTabModal({
     )
   }
 
-  const options = getAllAssistantOptions(customCommands)
-  const filtered = filterAssistants(options, filter)
-
-  const items: PickerItem[] = filtered.map((option, index) => {
-    const active = index === selectedIndex
-    const customCmd = customCommands[option.id]
-    return {
-      key: option.id,
-      onClick: () => runSideEffectGlobal({ type: 'launch-selected-assistant' }),
-      onEdit: () => dispatchGlobal({ assistantId: option.id, type: 'open-edit-custom-command' }),
-      subtitle: (
-        <box flexDirection="column">
-          <text fg={t.textMuted}>{option.description}</text>
-          {customCmd ? <text fg={t.primary}>{customCmd}</text> : null}
+  if (step === 'worktree-create') {
+    const selectedAssistant =
+      options.find((option) => option.id === selectedAssistantId) ?? options[0]
+    return (
+      <Form
+        title={`New worktree: ${selectedAssistant?.label ?? 'assistant'}`}
+        keybindsModeId="modal.new-tab.command-edit"
+        width={uiTokens.modalWidth.xl}
+      >
+        <box flexDirection="column" gap={1}>
+          <TextField
+            active={activeField === 'worktree-name'}
+            label="Worktree name"
+            value={worktreeName}
+            cursorPos={activeField === 'worktree-name' ? cursorPos : undefined}
+            placeholder="my-feature"
+          />
+          <box flexDirection="column">
+            <TextField
+              active={activeField === 'branch-name'}
+              label="Branch name"
+              value={branchName}
+              cursorPos={activeField === 'branch-name' ? cursorPos : undefined}
+              placeholder="aimux/my-feature"
+            />
+            {branchError != null && branchError !== '' ? (
+              <text fg={t.error}>{branchError}</text>
+            ) : null}
+          </box>
+          <text fg={t.textMuted}>Step 3/3: configure new worktree</text>
         </box>
-      ),
-      title: <text fg={active ? t.text : t.textMuted}>{option.label}</text>,
-    }
-  })
+      </Form>
+    )
+  }
+
+  if (step === 'worktree') {
+    const selectedAssistant =
+      options.find((option) => option.id === selectedAssistantId) ??
+      filtered[selectedIndex] ??
+      options[0]
+    const selectedWorktree = worktrees[selectedIndex]
+    const deleteBlockedReason = getDeleteBlockedReason({
+      currentSessionId,
+      worktree: selectedWorktree,
+      worktrees,
+    })
+    return (
+      <Picker
+        title={`New assistant: ${selectedAssistant?.label ?? 'assistant'}`}
+        keybindsModeId="modal.new-tab.command-edit"
+        width={uiTokens.modalWidth.md}
+        gap={1}
+        filter={null}
+        items={worktreeItems}
+        selectedIndex={selectedIndex}
+        emptyState={<text fg={t.textMuted}>No worktrees.</text>}
+        onHover={handleHover}
+        footer={
+          <box flexDirection="column">
+            {(worktreeDeleteMessage != null && worktreeDeleteMessage !== '') ||
+            (deleteBlockedReason != null && deleteBlockedReason !== '') ? (
+              <text
+                fg={
+                  worktreeDeleteMessage != null && worktreeDeleteMessage !== ''
+                    ? t.error
+                    : t.textMuted
+                }
+              >
+                {worktreeDeleteMessage ?? 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>
+          </box>
+        }
+      />
+    )
+  }
 
   return (
     <Picker
-      title="New assistant tab"
+      title="New assistant: choose assistant"
       keybindsModeId="modal.new-tab.command-edit"
       width={uiTokens.modalWidth.md}
       gap={1}
       filter={filter}
-      cursorPos={cursorPos}
+      cursorPos={activeField === 'assistant' ? cursorPos : undefined}
       items={items}
       selectedIndex={selectedIndex}
       emptyState={<text fg={t.textMuted}>No matching assistants.</text>}
-      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+      onHover={handleHover}
+      footer={
+        <box flexDirection="column">
+          <text fg={t.textMuted}>Step 1/2: choose assistant</text>
+          <text fg={t.textMuted}>Enter continues to worktree selection</text>
+        </box>
+      }
     />
   )
 }

package/src/ui/components/modals/themes/theme-picker-modal.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useMemo } from 'react'
+import { useCallback, useLayoutEffect, useMemo } from 'react'
 
 import type { ThemeId } from '../../../themes'
 
@@ -37,19 +37,28 @@ export function ThemePickerModal({
 
   const effectiveIndex = clampSelection(selectedIndex, filtered.length)
 
-  const items: PickerItem[] = filtered.map((id, rowIndex) => {
-    const active = rowIndex === effectiveIndex
-    const isCurrent = id === currentThemeId
-    return {
-      key: id,
-      onClick: () => {
-        dispatchGlobal({ type: 'close-modal' })
-        runSideEffectGlobal({ action: 'confirm', type: 'apply-theme' })
-      },
-      title: <text fg={active ? t.text : t.textMuted}>{themeDisplayName(id)}</text>,
-      trailing: isCurrent ? <text fg={t.primary}>current</text> : undefined,
-    }
-  })
+  const items = useMemo<PickerItem[]>(
+    () =>
+      filtered.map((id, rowIndex) => {
+        const active = rowIndex === effectiveIndex
+        const isCurrent = id === currentThemeId
+        return {
+          key: id,
+          onClick: () => {
+            dispatchGlobal({ type: 'close-modal' })
+            runSideEffectGlobal({ action: 'confirm', type: 'apply-theme' })
+          },
+          title: <text fg={active ? t.text : t.textMuted}>{themeDisplayName(id)}</text>,
+          trailing: isCurrent ? <text fg={t.primary}>current</text> : undefined,
+        }
+      }),
+    [currentThemeId, effectiveIndex, filtered, t]
+  )
+
+  const handleHover = useCallback(
+    (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
+    []
+  )
 
   return (
     <Picker
@@ -70,7 +79,7 @@ export function ThemePickerModal({
       items={items}
       selectedIndex={effectiveIndex}
       emptyState={<text fg={t.textMuted}>No themes available.</text>}
-      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+      onHover={handleHover}
     />
   )
 }

package/src/ui/components/modals/worktree/worktree-move-modal.tsx

@@ -0,0 +1,111 @@
+import { useCallback, useMemo } from 'react'
+
+import type { WorktreeRecord } from '../../../../state/types'
+
+import { dispatchGlobal } from '../../../../state/dispatch-ref'
+import { useTheme } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { ListItem } from '../../primitives/list-item'
+import { ModalShell } from '../shared/modal-shell'
+
+interface WorktreeMoveModalProps {
+  deleteSource: boolean
+  divergence: Record<string, { ahead: number; behind: number }>
+  selectedIndex: number
+  sourceWorktreeId: string
+  worktrees: WorktreeRecord[]
+}
+
+const MOVE_HINTS: [key: string, label: string][] = [
+  ['↵', 'move into selected target'],
+  ['d', 'toggle delete source'],
+  ['j/k', 'change target'],
+  ['esc', 'cancel'],
+]
+
+function formatDivergence(divergence: { ahead: number; behind: number } | undefined): string {
+  if (divergence == null) return ''
+  const parts: string[] = []
+  if (divergence.ahead > 0) parts.push(`↑${divergence.ahead}`)
+  if (divergence.behind > 0) parts.push(`↓${divergence.behind}`)
+  return parts.join(' ')
+}
+
+export function WorktreeMoveModal({
+  deleteSource,
+  divergence,
+  selectedIndex,
+  sourceWorktreeId,
+  worktrees,
+}: WorktreeMoveModalProps) {
+  const t = useTheme()
+  const source = useMemo(
+    () => worktrees.find((w) => w.id === sourceWorktreeId),
+    [sourceWorktreeId, worktrees]
+  )
+  const targets = useMemo(
+    () => worktrees.filter((w) => w.id !== sourceWorktreeId),
+    [sourceWorktreeId, worktrees]
+  )
+  const sourceLabel =
+    source?.branch != null && source.branch !== '' ? source.branch : (source?.name ?? 'worktree')
+  const handleSelectIndex = useCallback(
+    (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
+    []
+  )
+  return (
+    <ModalShell
+      title={`Move ${sourceLabel} →`}
+      keybindsModeId="modal.worktree-move"
+      width={uiTokens.modalWidth.md}
+      footer={
+        <box flexDirection="column" gap={1} marginTop={1}>
+          <box flexDirection="row" gap={1}>
+            <text fg={t.textMuted}>delete source after move</text>
+            <text fg={deleteSource ? t.warning : t.text}>{deleteSource ? 'on' : 'off'}</text>
+          </box>
+          <box flexDirection="column" gap={0}>
+            {MOVE_HINTS.map(([key, label]) => (
+              <box key={key} flexDirection="row" gap={2}>
+                <box width={4} flexShrink={0}>
+                  <text fg={t.primary}>{key}</text>
+                </box>
+                <text fg={t.textMuted}>{label}</text>
+              </box>
+            ))}
+          </box>
+        </box>
+      }
+    >
+      <box flexDirection="column" marginTop={1}>
+        {targets.length === 0 ? (
+          <text fg={t.textMuted}>No other worktree to move into.</text>
+        ) : (
+          targets.map((worktree, index) => {
+            const active = index === selectedIndex
+            const label =
+              worktree.branch != null && worktree.branch !== '' ? worktree.branch : worktree.name
+            const ahead = formatDivergence(divergence[worktree.id])
+            return (
+              <ListItem
+                key={worktree.id}
+                id={worktree.id}
+                index={index}
+                active={active}
+                onHoverIndex={handleSelectIndex}
+                onClickIndex={handleSelectIndex}
+                title={
+                  <text fg={active ? t.text : t.textMuted} wrapMode="none">
+                    {label}
+                    {worktree.source === 'primary' ? ' (primary)' : ''}
+                    {ahead !== '' ? ` ${ahead}` : ''}
+                  </text>
+                }
+              />
+            )
+          })
+        )}
+      </box>
+    </ModalShell>
+  )
+}

package/src/ui/components/overlays/ai-usage/ai-usage-indicator.tsx

@@ -1,5 +1,7 @@
 import type { AIUsageTool } from '@brimveyn/aimux-config'
 
+import { useCallback } from 'react'
+
 import { useAIUsageStore } from '../../../../state/ai-usage-store'
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
 import { useTheme } from '../../../theme'
@@ -34,7 +36,7 @@ function formatResetIn(snap: {
   resetAt: string | null
   timeRemaining: string | null
 }): string | null {
-  if (snap.resetAt) {
+  if (snap.resetAt != null && snap.resetAt !== '') {
     const diffMs = new Date(snap.resetAt).getTime() - Date.now()
     if (diffMs > 0) {
       const totalMin = Math.round(diffMs / 60_000)
@@ -52,6 +54,15 @@ export function AIUsageIndicator() {
   const enabled = useAIUsageStore((s) => s.enabled)
   const snapshots = useAIUsageStore((s) => s.snapshots)
 
+  const openModal = useCallback(
+    (e: { preventDefault: () => void; stopPropagation: () => void }) => {
+      e.preventDefault()
+      e.stopPropagation()
+      dispatchGlobal({ type: 'open-ai-usage-modal' })
+    },
+    []
+  )
+
   if (!enabled) return null
 
   const ordered: AIUsageTool[] = ['claude', 'codex']
@@ -59,12 +70,6 @@ export function AIUsageIndicator() {
     .map((tool) => ({ snap: snapshots[tool], tool }))
     .filter((entry) => entry.snap !== undefined)
 
-  const openModal = (e: { preventDefault: () => void; stopPropagation: () => void }) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dispatchGlobal({ type: 'open-ai-usage-modal' })
-  }
-
   if (entries.length === 0) {
     return (
       <box
@@ -85,7 +90,7 @@ export function AIUsageIndicator() {
         if (!snap) return null
         const icon = TOOL_ICON[tool]
 
-        if (snap.error && !snap.stale) {
+        if (snap.error != null && snap.error !== '' && !(snap.stale === true)) {
           return (
             <box
               key={tool}
@@ -134,7 +139,7 @@ export function AIUsageIndicator() {
               <text fg={t.text} selectable={false}>
                 {` ${pctText}`}
               </text>
-              {reset ? (
+              {reset != null && reset !== '' ? (
                 <text fg={t.textMuted} selectable={false}>
                   {` · ${reset}`}
                 </text>

package/src/ui/components/overlays/context-menu/context-menu-box.tsx

@@ -1,21 +1,30 @@
 import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
 import type { BoxProps } from '@opentui/react'
 
+import { memo, useCallback } from 'react'
+
 import { type ContextMenuItem, openContextMenu } from '../../../context-menu/controller'
 
 interface ContextMenuBoxProps extends BoxProps {
   rightClickMenu?: ContextMenuItem[]
 }
 
-export function ContextMenuBox({ onMouseDown, rightClickMenu, ...boxProps }: ContextMenuBoxProps) {
-  function handleMouseDown(this: BoxRenderable, event: OtuiMouseEvent): void {
-    if (event.button === 2 && rightClickMenu && rightClickMenu.length > 0) {
-      event.preventDefault()
-      event.stopPropagation()
-      openContextMenu(event.x, event.y, rightClickMenu)
-      return
-    }
-    onMouseDown?.call(this, event)
-  }
+export const ContextMenuBox = memo(function ContextMenuBox({
+  onMouseDown,
+  rightClickMenu,
+  ...boxProps
+}: ContextMenuBoxProps) {
+  const handleMouseDown = useCallback(
+    function (this: BoxRenderable, event: OtuiMouseEvent): void {
+      if (event.button === 2 && rightClickMenu && rightClickMenu.length > 0) {
+        event.preventDefault()
+        event.stopPropagation()
+        openContextMenu(event.x, event.y, rightClickMenu)
+        return
+      }
+      onMouseDown?.call(this, event)
+    },
+    [onMouseDown, rightClickMenu]
+  )
   return <box {...boxProps} onMouseDown={handleMouseDown} />
-}
+})

package/src/ui/components/overlays/context-menu/context-menu-overlay.tsx

@@ -1,5 +1,7 @@
+import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
+
 import { useKeyboard } from '@opentui/react'
-import { useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useState } from 'react'
 
 import { useAppStore } from '../../../../state/app-store'
 import {
@@ -9,6 +11,50 @@ import {
 } from '../../../context-menu/controller'
 import { useTheme } from '../../../theme'
 
+const MenuItem = memo(function MenuItem({
+  active,
+  index,
+  label,
+  onHover,
+  onSelect,
+  width,
+}: {
+  active: boolean
+  index: number
+  label: string
+  onHover: (index: number) => void
+  onSelect: () => void
+  width: number
+}) {
+  const t = useTheme()
+  const handleMouseOver = useCallback(() => onHover(index), [index, onHover])
+  const handleMouseDown = useCallback(
+    (e: OtuiMouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      if (e.button !== 0) return
+      closeContextMenu()
+      onSelect()
+    },
+    [onSelect]
+  )
+  return (
+    <box
+      width={width - 2}
+      flexShrink={0}
+      paddingLeft={1}
+      paddingRight={1}
+      backgroundColor={active ? t.backgroundElement : undefined}
+      onMouseOver={handleMouseOver}
+      onMouseDown={handleMouseDown}
+    >
+      <text fg={active ? t.text : t.textMuted} selectable={false}>
+        {label}
+      </text>
+    </box>
+  )
+})
+
 export function ContextMenuOverlay() {
   const [menu, setMenu] = useState<ContextMenuState | null>(null)
   const [selected, setSelected] = useState(0)
@@ -48,6 +94,15 @@ export function ContextMenuOverlay() {
     }
   })
 
+  const handleBackdropMouseDown = useCallback((e: OtuiMouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    closeContextMenu()
+  }, [])
+  const handleMenuMouseDown = useCallback((e: OtuiMouseEvent) => {
+    e.stopPropagation()
+  }, [])
+
   if (!menu) return null
 
   const maxLabel = Math.max(...menu.items.map(([label]) => label.length))
@@ -66,11 +121,7 @@ export function ContextMenuOverlay() {
         left={0}
         width="100%"
         height="100%"
-        onMouseDown={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
-          closeContextMenu()
-        }}
+        onMouseDown={handleBackdropMouseDown}
       />
       <box
         position="absolute"
@@ -81,35 +132,19 @@ export function ContextMenuOverlay() {
         border
         borderColor={t.border}
         backgroundColor={t.backgroundPanel}
-        onMouseDown={(e) => {
-          e.stopPropagation()
-        }}
+        onMouseDown={handleMenuMouseDown}
       >
-        {menu.items.map(([label, onSelect], index) => {
-          const active = index === selected
-          return (
-            <box
-              key={`${label}-${index}`}
-              width={width - 2}
-              flexShrink={0}
-              paddingLeft={1}
-              paddingRight={1}
-              backgroundColor={active ? t.backgroundElement : undefined}
-              onMouseOver={() => setSelected(index)}
-              onMouseDown={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                if (e.button !== 0) return
-                closeContextMenu()
-                onSelect()
-              }}
-            >
-              <text fg={active ? t.text : t.textMuted} selectable={false}>
-                {label}
-              </text>
-            </box>
-          )
-        })}
+        {menu.items.map(([label, onSelect], index) => (
+          <MenuItem
+            key={label}
+            index={index}
+            label={label}
+            onHover={setSelected}
+            onSelect={onSelect}
+            active={index === selected}
+            width={width}
+          />
+        ))}
       </box>
     </box>
   )