@brimveyn/aimux 1.13.0 → 1.14.0

package/src/ui/components/layout/session-bar.tsx

@@ -1,6 +1,6 @@
 import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
 
-import { useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useMemo, useRef, useState } from 'react'
 
 import type { SessionRecord, SessionStatus } from '../../../state/types'
 
@@ -31,52 +31,49 @@ export function SessionBar({ forceVisible = false }: SessionBarProps) {
   const chipRefs = useRef(new Map<string, BoxRenderable>())
 
   const ordered = useMemo(() => orderSessionsForDisplay(sessions), [sessions])
-  if ((!bar.visible && !forceVisible) || ordered.length === 0) return null
+  const baselineOrder = useMemo(() => ordered.map((s) => s.id), [ordered])
 
-  const visibleSessions =
-    dragOrder !== null
-      ? dragOrder
-          .map((id) => ordered.find((s) => s.id === id))
-          .filter((s): s is SessionRecord => !!s)
-      : ordered
-
-  const baselineOrder = ordered.map((s) => s.id)
-
-  function setChipRef(id: string, ref: BoxRenderable | null): void {
+  const setChipRef = useCallback((id: string, ref: BoxRenderable | null): void => {
     if (ref) chipRefs.current.set(id, ref)
     else chipRefs.current.delete(id)
-  }
+  }, [])
 
-  function findChipAtX(x: number): string | null {
+  const findChipAtX = useCallback((x: number): string | null => {
     for (const [id, ref] of chipRefs.current) {
       if (x >= ref.x && x < ref.x + ref.width) return id
     }
     return null
-  }
+  }, [])
 
-  const handleMouseDown = (id: string) => {
-    setDraggingId(id)
-    setDragOrder(baselineOrder)
-    lastSwapWithRef.current = null
-  }
-
-  const handleMouseDrag = (event: OtuiMouseEvent) => {
-    if (!(draggingId != null && draggingId !== '')) return
-    const hit = findChipAtX(event.x)
-    if (hit === null) {
-      lastSwapWithRef.current = null
-      return
-    }
-    if (hit === draggingId) {
+  const handleMouseDown = useCallback(
+    (id: string) => {
+      setDraggingId(id)
+      setDragOrder(baselineOrder)
       lastSwapWithRef.current = null
-      return
-    }
-    if (hit === lastSwapWithRef.current) return
-    setDragOrder((prev) => (prev ? moveIdToIdPosition(prev, draggingId, hit) : prev))
-    lastSwapWithRef.current = hit
-  }
+    },
+    [baselineOrder]
+  )
 
-  const commitDrop = () => {
+  const handleMouseDrag = useCallback(
+    (event: OtuiMouseEvent) => {
+      if (!(draggingId != null && draggingId !== '')) return
+      const hit = findChipAtX(event.x)
+      if (hit === null) {
+        lastSwapWithRef.current = null
+        return
+      }
+      if (hit === draggingId) {
+        lastSwapWithRef.current = null
+        return
+      }
+      if (hit === lastSwapWithRef.current) return
+      setDragOrder((prev) => (prev ? moveIdToIdPosition(prev, draggingId, hit) : prev))
+      lastSwapWithRef.current = hit
+    },
+    [draggingId, findChipAtX]
+  )
+
+  const commitDrop = useCallback(() => {
     const source = draggingId
     const finalOrder = dragOrder
     setDraggingId(null)
@@ -95,13 +92,27 @@ export function SessionBar({ forceVisible = false }: SessionBarProps) {
     if (idx >= 0) {
       runSideEffectGlobal({ index: idx + 1, type: 'switch-session-by-index' })
     }
-  }
+  }, [baselineOrder, dragOrder, draggingId])
 
-  const cancelDrag = () => {
+  const cancelDrag = useCallback(() => {
     setDraggingId(null)
     setDragOrder(null)
     lastSwapWithRef.current = null
-  }
+  }, [])
+
+  const handleNewSession = useCallback((e: OtuiMouseEvent) => {
+    e.stopPropagation()
+    dispatchGlobal({ returnToSessionPicker: false, type: 'open-create-session-modal' })
+  }, [])
+
+  if ((!bar.visible && !forceVisible) || ordered.length === 0) return null
+
+  const visibleSessions =
+    dragOrder !== null
+      ? dragOrder
+          .map((id) => ordered.find((s) => s.id === id))
+          .filter((s): s is SessionRecord => !!s)
+      : ordered
 
   return (
     <box
@@ -112,50 +123,28 @@ export function SessionBar({ forceVisible = false }: SessionBarProps) {
       paddingRight={1}
       backgroundColor={headerBg}
     >
-      {visibleSessions.map((session) => {
-        const displayIndex = baselineOrder.indexOf(session.id) + 1
-        return (
-          <SessionChip
-            key={session.id}
-            session={session}
-            index={displayIndex}
-            active={session.id === currentId}
-            status={statusMap[session.id] ?? IDLE_SESSION_STATUS}
-            dragging={draggingId === session.id}
-            onRef={(r) => setChipRef(session.id, r)}
-            onMouseDown={() => handleMouseDown(session.id)}
-            onMouseDrag={handleMouseDrag}
-            onMouseUp={commitDrop}
-            onMouseDragEnd={cancelDrag}
-            rightClickMenu={[
-              [
-                'Rename workspace',
-                () =>
-                  dispatchGlobal({
-                    initialName: session.name,
-                    returnToSessionPicker: false,
-                    sessionTargetId: session.id,
-                    type: 'open-session-name-modal',
-                  }),
-              ],
-              [
-                'Delete workspace',
-                () => runSideEffectGlobal({ sessionId: session.id, type: 'delete-session' }),
-              ],
-            ]}
-          />
-        )
-      })}
+      {visibleSessions.map((session) => (
+        <SessionChip
+          key={session.id}
+          session={session}
+          index={baselineOrder.indexOf(session.id) + 1}
+          active={session.id === currentId}
+          status={statusMap[session.id] ?? IDLE_SESSION_STATUS}
+          dragging={draggingId === session.id}
+          setChipRef={setChipRef}
+          onDragStart={handleMouseDown}
+          onDrag={handleMouseDrag}
+          onDrop={commitDrop}
+          onDragCancel={cancelDrag}
+        />
+      ))}
       <box flexGrow={1} />
       <box
         flexDirection="row"
         paddingLeft={1}
         paddingRight={1}
         backgroundColor={t.backgroundElement}
-        onMouseDown={(e) => {
-          e.stopPropagation()
-          dispatchGlobal({ returnToSessionPicker: false, type: 'open-create-session-modal' })
-        }}
+        onMouseDown={handleNewSession}
       >
         <text fg={t.text} selectable={false}>
           + New
@@ -179,25 +168,23 @@ interface SessionChipProps {
   active: boolean
   status: SessionStatus
   dragging: boolean
-  onRef: (ref: BoxRenderable | null) => void
-  onMouseDown: (event: OtuiMouseEvent) => void
-  onMouseDrag: (event: OtuiMouseEvent) => void
-  onMouseUp: (event: OtuiMouseEvent) => void
-  onMouseDragEnd: (event: OtuiMouseEvent) => void
-  rightClickMenu: [string, () => void][]
+  setChipRef: (id: string, ref: BoxRenderable | null) => void
+  onDragStart: (id: string) => void
+  onDrag: (event: OtuiMouseEvent) => void
+  onDrop: () => void
+  onDragCancel: () => void
 }
 
-function SessionChip({
+const SessionChip = memo(function SessionChip({
   active,
   dragging,
   index,
-  onMouseDown,
-  onMouseDrag,
-  onMouseDragEnd,
-  onMouseUp,
-  onRef,
-  rightClickMenu,
+  onDrag,
+  onDragCancel,
+  onDragStart,
+  onDrop,
   session,
+  setChipRef,
   status,
 }: SessionChipProps) {
   const t = useTheme()
@@ -212,30 +199,68 @@ function SessionChip({
   const waitingColor = t.warning
   const [hovered, setHovered] = useState(false)
 
+  const handleRef = useCallback(
+    (r: BoxRenderable | null) => setChipRef(session.id, r),
+    [setChipRef, session.id]
+  )
+  const handleMouseDown = useCallback(
+    (e: OtuiMouseEvent) => {
+      e.preventDefault()
+      onDragStart(session.id)
+    },
+    [onDragStart, session.id]
+  )
+  const handleMouseUp = useCallback(
+    (e: OtuiMouseEvent) => {
+      e.preventDefault()
+      onDrop()
+    },
+    [onDrop]
+  )
+  const handleMouseOver = useCallback(() => setHovered(true), [])
+  const handleMouseOut = useCallback(() => setHovered(false), [])
+  const handleDeleteMouseDown = useCallback(
+    (event: OtuiMouseEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      runSideEffectGlobal({ sessionId: session.id, type: 'delete-session' })
+    },
+    [session.id]
+  )
+  const rightClickMenu = useMemo<[string, () => void][]>(
+    () => [
+      [
+        'Rename workspace',
+        () =>
+          dispatchGlobal({
+            initialName: session.name,
+            returnToSessionPicker: false,
+            sessionTargetId: session.id,
+            type: 'open-session-name-modal',
+          }),
+      ],
+      [
+        'Delete workspace',
+        () => runSideEffectGlobal({ sessionId: session.id, type: 'delete-session' }),
+      ],
+    ],
+    [session.id, session.name]
+  )
+
   return (
     <ContextMenuBox
-      ref={onRef}
+      ref={handleRef}
       flexDirection="row"
       paddingLeft={1}
       paddingRight={1}
       backgroundColor={bgColor}
       rightClickMenu={rightClickMenu}
-      onMouseOver={() => setHovered(true)}
-      onMouseOut={() => setHovered(false)}
-      onMouseDown={(e) => {
-        e.preventDefault()
-        onMouseDown(e)
-      }}
-      onMouseDrag={(e) => {
-        onMouseDrag(e)
-      }}
-      onMouseUp={(e) => {
-        e.preventDefault()
-        onMouseUp(e)
-      }}
-      onMouseDragEnd={(e) => {
-        onMouseDragEnd(e)
-      }}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      onMouseDown={handleMouseDown}
+      onMouseDrag={onDrag}
+      onMouseUp={handleMouseUp}
+      onMouseDragEnd={onDragCancel}
     >
       {showWaiting ? (
         <text fg={waitingColor} selectable={false}>
@@ -256,14 +281,7 @@ function SessionChip({
         [{index}] {session.name}
       </text>
       {hovered ? (
-        <box
-          paddingLeft={1}
-          onMouseDown={(event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            runSideEffectGlobal({ sessionId: session.id, type: 'delete-session' })
-          }}
-        >
+        <box paddingLeft={1} onMouseDown={handleDeleteMouseDown}>
           <text fg={t.textMuted} selectable={false}>
             ×
           </text>
@@ -275,4 +293,4 @@ function SessionChip({
       )}
     </ContextMenuBox>
   )
-}
+})

package/src/ui/components/layout/sidebar/sidebar.tsx

@@ -4,7 +4,7 @@ import type {
   ScrollBoxRenderable,
 } from '@opentui/core'
 
-import { memo, useMemo, useRef } from 'react'
+import { memo, type ReactNode, useCallback, useMemo, useRef } from 'react'
 
 import type { BranchDivergence } from '../../../../state/types'
 
@@ -43,6 +43,7 @@ const GUTTER_MIDDLE = '├'
 const GUTTER_END = '╰'
 const GUTTER_PAD = '│'
 const RESIZE_HANDLE = '─'
+const COLUMN_CONTENT_OPTIONS = { flexDirection: 'column' as const, gap: 0 }
 
 // Left accent strip + trailing space for a worktree group header.
 const WORKTREE_STRIP = '▍ '
@@ -92,6 +93,11 @@ const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: nu
   const projectPath = getSessionProjectPath(currentSession)
   const branch = useSidebarBranch(projectPath)
 
+  const handleNewAssistant = useCallback((e: OtuiMouseEvent) => {
+    e.stopPropagation()
+    dispatchGlobal({ type: 'open-new-tab-modal' })
+  }, [])
+
   return (
     <box flexDirection="column" flexShrink={0} gap={0}>
       <text fg={t.text} selectable={false}>
@@ -122,10 +128,7 @@ const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: nu
         backgroundColor={t.backgroundPanel}
         justifyContent="center"
         marginTop={1}
-        onMouseDown={(e) => {
-          e.stopPropagation()
-          dispatchGlobal({ type: 'open-new-tab-modal' })
-        }}
+        onMouseDown={handleNewAssistant}
       >
         <text fg={t.text} selectable={false}>
           + New assistant
@@ -153,6 +156,31 @@ function renderGroupGutter(isGroupStart: boolean, isGroupMiddle: boolean, isGrou
   )
 }
 
+const TabRowButton = memo(function TabRowButton({
+  backgroundColor,
+  children,
+  onActivate,
+  tabId,
+}: {
+  tabId: string
+  backgroundColor: string | undefined
+  onActivate?: (tabId: string) => void
+  children: ReactNode
+}) {
+  const handleMouseDown = useCallback(
+    (event: OtuiMouseEvent) => {
+      event.stopPropagation()
+      onActivate?.(tabId)
+    },
+    [onActivate, tabId]
+  )
+  return (
+    <box backgroundColor={backgroundColor} flexDirection="row" onMouseDown={handleMouseDown}>
+      {children}
+    </box>
+  )
+})
+
 interface TabsBodyProps {
   onTabActivate?: (tabId: string) => void
   contentWidth: number
@@ -213,7 +241,7 @@ const TabsBody = memo(function TabsBody({ contentWidth, onTabActivate }: TabsBod
       flexGrow={1}
       scrollY
       viewportCulling
-      contentOptions={{ flexDirection: 'column', gap: 0 }}
+      contentOptions={COLUMN_CONTENT_OPTIONS}
     >
       {tabs.length === 0 ? (
         <box paddingTop={1}>
@@ -287,13 +315,10 @@ const TabsBody = memo(function TabsBody({ contentWidth, onTabActivate }: TabsBod
                   </box>
                 </box>
               ) : null}
-              <box
+              <TabRowButton
+                tabId={tab.id}
+                onActivate={onTabActivate}
                 backgroundColor={getRowBackground({ alternate, isActive, t })}
-                flexDirection="row"
-                onMouseDown={(event) => {
-                  event.stopPropagation()
-                  onTabActivate?.(tab.id)
-                }}
               >
                 {inGroup ? renderGroupGutter(isGroupStart, isGroupMiddle, isGroupEnd) : null}
                 <box flexGrow={1}>
@@ -306,7 +331,7 @@ const TabsBody = memo(function TabsBody({ contentWidth, onTabActivate }: TabsBod
                     moveWorktreeId={moveWorktreeId}
                   />
                 </box>
-              </box>
+              </TabRowButton>
             </box>
           )
         })
@@ -330,6 +355,52 @@ export function Sidebar({
   const bodyRef = useRef<BoxRenderable | null>(null)
   useWorktreeDivergencePolling(sidebarVisible)
 
+  const handleSidebarMouseDown = useCallback(() => {
+    if (focusMode === 'terminal-input') {
+      dispatchGlobal({ focusMode: 'navigation', type: 'set-focus-mode' })
+    }
+  }, [focusMode])
+  const handleSidebarMouseDrag = useCallback(
+    (event: OtuiMouseEvent) => {
+      if (onResizeDrag?.(event) === true) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    },
+    [onResizeDrag]
+  )
+  const handleSidebarMouseUp = useCallback(() => {
+    onResizeDragEnd?.()
+  }, [onResizeDragEnd])
+  const handleEmbeddedHandleMouseDown = useCallback(
+    (event: OtuiMouseEvent) => {
+      const body = bodyRef.current
+      if (!body) return
+      event.preventDefault()
+      event.stopPropagation()
+      onEmbeddedGitResizeStart?.({
+        containerStart: body.y,
+        position: gitPane.position === 'top' ? 'top' : 'bottom',
+        totalSize: Math.max(1, body.height),
+      })
+    },
+    [gitPane.position, onEmbeddedGitResizeStart]
+  )
+  const sidebarMenu = useMemo<[string, () => void][]>(
+    () => [
+      ['Hide sidebar', () => dispatchGlobal({ type: 'toggle-sidebar' })],
+      ['Toggle git pane', () => dispatchGlobal({ type: 'toggle-git-pane' })],
+      [
+        'Toggle diff mode',
+        () => {
+          dispatchGlobal({ type: 'enter-git-mode' })
+          dispatchGlobal({ type: 'git-mode-toggle-diff-view' })
+        },
+      ],
+    ],
+    []
+  )
+
   if (!sidebarVisible) {
     return null
   }
@@ -369,21 +440,7 @@ export function Sidebar({
     </ContextMenuBox>
   ) : null
   const embeddedHandle = gitEmbedded ? (
-    <box
-      minHeight={1}
-      flexShrink={0}
-      onMouseDown={(event) => {
-        const body = bodyRef.current
-        if (!body) return
-        event.preventDefault()
-        event.stopPropagation()
-        onEmbeddedGitResizeStart?.({
-          containerStart: body.y,
-          position: gitPane.position === 'top' ? 'top' : 'bottom',
-          totalSize: Math.max(1, body.height),
-        })
-      }}
-    >
+    <box minHeight={1} flexShrink={0} onMouseDown={handleEmbeddedHandleMouseDown}>
       <text fg={t.border} selectable={false}>
         {RESIZE_HANDLE.repeat(Math.max(1, contentWidth))}
       </text>
@@ -398,31 +455,10 @@ export function Sidebar({
       backgroundColor={sidebarBg}
       gap={0}
       overflow="hidden"
-      rightClickMenu={[
-        ['Hide sidebar', () => dispatchGlobal({ type: 'toggle-sidebar' })],
-        ['Toggle git pane', () => dispatchGlobal({ type: 'toggle-git-pane' })],
-        [
-          'Toggle diff mode',
-          () => {
-            dispatchGlobal({ type: 'enter-git-mode' })
-            dispatchGlobal({ type: 'git-mode-toggle-diff-view' })
-          },
-        ],
-      ]}
-      onMouseDown={() => {
-        if (focusMode === 'terminal-input') {
-          dispatchGlobal({ focusMode: 'navigation', type: 'set-focus-mode' })
-        }
-      }}
-      onMouseDrag={(event) => {
-        if (onResizeDrag?.(event) === true) {
-          event.preventDefault()
-          event.stopPropagation()
-        }
-      }}
-      onMouseUp={() => {
-        onResizeDragEnd?.()
-      }}
+      rightClickMenu={sidebarMenu}
+      onMouseDown={handleSidebarMouseDown}
+      onMouseDrag={handleSidebarMouseDrag}
+      onMouseUp={handleSidebarMouseUp}
     >
       <box flexDirection="row" width={sidebarWidth} flexGrow={1} overflow="hidden">
         <box width={contentWidth} flexGrow={1} flexDirection="column" overflow="hidden">

package/src/ui/components/layout/sidebar/tab-item.tsx

@@ -1,4 +1,6 @@
-import { useState } from 'react'
+import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
+
+import { useCallback, useMemo, useState } from 'react'
 
 import type { TabSession } from '../../../../state/types'
 
@@ -116,6 +118,64 @@ export function TabItem({ active, focused, id, inLayout, moveWorktreeId, tab }:
   const indicatorColor = getIndicatorColor(active, focused, isInLayout)
   const [hovered, setHovered] = useState(false)
 
+  const rightClickMenu = useMemo<[string, () => void][]>(
+    () => [
+      [
+        'Rename',
+        () => {
+          dispatchGlobal({ tabId: tab.id, type: 'set-active-tab' })
+          dispatchGlobal({ type: 'open-rename-tab-modal' })
+        },
+      ],
+      [
+        'Close',
+        () => {
+          dispatchGlobal({ tabId: tab.id, type: 'close-tab' })
+          runSideEffectGlobal({ tabId: tab.id, type: 'close-tab' })
+        },
+      ],
+      [
+        'Move up',
+        () => {
+          dispatchGlobal({ tabId: tab.id, type: 'set-active-tab' })
+          dispatchGlobal({ delta: -1, type: 'reorder-active-tab' })
+        },
+      ],
+      [
+        'Move down',
+        () => {
+          dispatchGlobal({ tabId: tab.id, type: 'set-active-tab' })
+          dispatchGlobal({ delta: 1, type: 'reorder-active-tab' })
+        },
+      ],
+      // Move this tab's worktree into another one. Opened from here it overlays
+      // the normal view (no git mode) since the open action doesn't touch focus.
+      ...(moveWorktreeId != null && moveWorktreeId !== ''
+        ? [
+            [
+              'Move worktree',
+              () =>
+                dispatchGlobal({
+                  sourceWorktreeId: moveWorktreeId,
+                  type: 'open-worktree-move-modal',
+                }),
+            ] as [string, () => void],
+          ]
+        : []),
+    ],
+    [moveWorktreeId, tab.id]
+  )
+  const handleMouseOver = useCallback(() => setHovered(true), [])
+  const handleMouseOut = useCallback(() => setHovered(false), [])
+  const handleCloseMouseDown = useCallback(
+    (event: OtuiMouseEvent) => {
+      event.stopPropagation()
+      dispatchGlobal({ tabId: tab.id, type: 'close-tab' })
+      runSideEffectGlobal({ tabId: tab.id, type: 'close-tab' })
+    },
+    [tab.id]
+  )
+
   return (
     <ContextMenuBox
       id={id}
@@ -125,52 +185,9 @@ export function TabItem({ active, focused, id, inLayout, moveWorktreeId, tab }:
       paddingBottom={0}
       flexDirection="column"
       gap={0}
-      rightClickMenu={[
-        [
-          'Rename',
-          () => {
-            dispatchGlobal({ tabId: tab.id, type: 'set-active-tab' })
-            dispatchGlobal({ type: 'open-rename-tab-modal' })
-          },
-        ],
-        [
-          'Close',
-          () => {
-            dispatchGlobal({ tabId: tab.id, type: 'close-tab' })
-            runSideEffectGlobal({ tabId: tab.id, type: 'close-tab' })
-          },
-        ],
-        [
-          'Move up',
-          () => {
-            dispatchGlobal({ tabId: tab.id, type: 'set-active-tab' })
-            dispatchGlobal({ delta: -1, type: 'reorder-active-tab' })
-          },
-        ],
-        [
-          'Move down',
-          () => {
-            dispatchGlobal({ tabId: tab.id, type: 'set-active-tab' })
-            dispatchGlobal({ delta: 1, type: 'reorder-active-tab' })
-          },
-        ],
-        // Move this tab's worktree into another one. Opened from here it overlays
-        // the normal view (no git mode) since the open action doesn't touch focus.
-        ...(moveWorktreeId != null && moveWorktreeId !== ''
-          ? [
-              [
-                'Move worktree',
-                () =>
-                  dispatchGlobal({
-                    sourceWorktreeId: moveWorktreeId,
-                    type: 'open-worktree-move-modal',
-                  }),
-              ] as [string, () => void],
-            ]
-          : []),
-      ]}
-      onMouseOver={() => setHovered(true)}
-      onMouseOut={() => setHovered(false)}
+      rightClickMenu={rightClickMenu}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
     >
       <box flexDirection="row" alignItems="center">
         <text fg={indicatorColor} selectable={false}>
@@ -182,13 +199,7 @@ export function TabItem({ active, focused, id, inLayout, moveWorktreeId, tab }:
           </text>
         </box>
         {hovered ? (
-          <box
-            onMouseDown={(event) => {
-              event.stopPropagation()
-              dispatchGlobal({ tabId: tab.id, type: 'close-tab' })
-              runSideEffectGlobal({ tabId: tab.id, type: 'close-tab' })
-            }}
-          >
+          <box onMouseDown={handleCloseMouseDown}>
             <text fg={t.textMuted} selectable={false}>
               ×
             </text>