@brimveyn/aimux 1.10.2 → 1.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brimveyn/aimux",
-  "version": "1.10.2",
+  "version": "1.10.3",
   "description": "A terminal multiplexer for AI CLIs. Run Claude, Codex, OpenCode side-by-side with tabbed navigation, split panes, and persistent sessions.",
   "keywords": [
     "ai",

package/src/app-runtime/use-terminal-resize.ts

@@ -140,7 +140,7 @@ export function useTerminalResize({
 
   const gitPaneInPaneMode = state.gitPane.mode === 'pane' && state.gitPane.visible
   const terminalSize = useMemo(() => {
-    const sidebarWidth = state.sidebar.visible ? state.sidebar.width + 1 : 0
+    const sidebarWidth = state.sidebar.visible ? state.sidebar.width : 0
     const sessionBarRows = state.sessionBar.visible ? 1 : 0
     const sessionBarTopOffset =
       state.sessionBar.visible && state.sessionBar.position === 'top' ? 1 : 0

package/src/ui/components/git/git-panel.tsx

@@ -108,7 +108,7 @@ function renderFileLabel(
   const showDir = fileListMode === 'flat' && pathConfig.enabled && dir
   if (!file.renamedFrom) {
     return (
-      <text wrapMode="none">
+      <text selectable={false} wrapMode="none">
         <span fg={t.text}>{basename}</span>
         {showDir ? <span fg={t.textMuted}> {dir}</span> : null}
       </text>
@@ -118,7 +118,7 @@ function renderFileLabel(
   const renamed = splitPath(renamedDisplay)
   const renamedDir = stripTrailingSlash(renamed.prefix)
   return (
-    <text wrapMode="none">
+    <text selectable={false} wrapMode="none">
       <span fg={t.textMuted}>{renamed.basename}</span>
       {showDir && renamedDir ? <span fg={t.textMuted}> {renamedDir}</span> : null}
       <span fg={t.textMuted}> → </span>
@@ -140,18 +140,23 @@ function renderDiffCount(
   const t = getCurrentTheme()
   if (!hasNumstat) {
     return (
-      <text fg={t.textMuted} bg={bg} flexShrink={0}>
+      <text selectable={false} fg={t.textMuted} bg={bg} flexShrink={0}>
         —
       </text>
     )
   }
   return (
     <box flexDirection="row" flexShrink={0}>
-      <text fg={getCurrentTheme().diffAdded} bg={bg}>{`+${padRight(file.added, addedW)}`}</text>
-      <text fg={t.textMuted} bg={bg}>
+      <text
+        selectable={false}
+        fg={getCurrentTheme().diffAdded}
+        bg={bg}
+      >{`+${padRight(file.added, addedW)}`}</text>
+      <text selectable={false} fg={t.textMuted} bg={bg}>
         {' '}
       </text>
       <text
+        selectable={false}
         fg={getCurrentTheme().diffRemoved}
         bg={bg}
       >{`−${padRight(file.removed, removedW)}`}</text>
@@ -172,13 +177,13 @@ function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode
     <box key={row.key} flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
       <box flexGrow={1} overflow="hidden" paddingLeft={row.depth * 2}>
         <box flexDirection="row" gap={1} onMouseDown={onToggle}>
-          <text fg={t.textMuted} bg={bg}>
+          <text selectable={false} fg={t.textMuted} bg={bg}>
             {row.isCollapsed ? '▸' : '▾'}
           </text>
-          <text fg={getCurrentTheme().textMuted} bg={bg}>
+          <text selectable={false} fg={getCurrentTheme().textMuted} bg={bg}>
             {row.isCollapsed ? '\uf07b' : '\uf07c'}
           </text>
-          <text fg={t.textMuted} bg={bg} wrapMode="none">
+          <text selectable={false} fg={t.textMuted} bg={bg} wrapMode="none">
             {row.name}
           </text>
         </box>
@@ -210,13 +215,13 @@ function renderFileRow(
   return (
     <box key={row.key} flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
       <box width={2} flexShrink={0} justifyContent="center">
-        <text fg={statusColor(file.status)} bg={bg}>
+        <text selectable={false} fg={statusColor(file.status)} bg={bg}>
           <strong>{displayStatus(file)}</strong>
         </text>
       </box>
       {repoTag ? (
         <box flexShrink={0}>
-          <text fg={getCurrentTheme().primary} bg={bg}>
+          <text selectable={false} fg={getCurrentTheme().primary} bg={bg}>
             <strong>{repoTag}</strong>
           </text>
         </box>
@@ -254,16 +259,22 @@ function renderTreeSection(
   return (
     <box key={section} flexDirection="column" marginTop={marginTop}>
       <box flexDirection="row" justifyContent="space-between">
-        <text fg={t2.text}>
+        <text selectable={false} fg={t2.text}>
           <strong>
             {title} ({files.length})
           </strong>
         </text>
         {showListModeToggle ? (
           <box flexDirection="row" gap={1} onMouseDown={toggleListMode}>
-            <text fg={fileListMode === 'tree' ? t2.primary : t2.textMuted}>tree</text>
-            <text fg={t2.textMuted}>|</text>
-            <text fg={fileListMode === 'flat' ? t2.primary : t2.textMuted}>flat</text>
+            <text selectable={false} fg={fileListMode === 'tree' ? t2.primary : t2.textMuted}>
+              tree
+            </text>
+            <text selectable={false} fg={t2.textMuted}>
+              |
+            </text>
+            <text selectable={false} fg={fileListMode === 'flat' ? t2.primary : t2.textMuted}>
+              flat
+            </text>
           </box>
         ) : null}
       </box>
@@ -295,7 +306,9 @@ function renderStatus(gitPanel: GitPanelState, hasProjectPath: boolean): ReactNo
   if (!placeholder) return null
   return (
     <box flexGrow={1} flexDirection="column" alignItems="center" paddingTop={1}>
-      <text fg={placeholder.labelColor}>{placeholder.label}</text>
+      <text selectable={false} fg={placeholder.labelColor}>
+        {placeholder.label}
+      </text>
     </box>
   )
 }
@@ -370,7 +383,7 @@ export const GitPanel = memo(function GitPanel({
   return (
     <box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} overflow="hidden" gap={0}>
       {hasRemoteTracking ? (
-        <text fg={t.textMuted}>
+        <text selectable={false} fg={t.textMuted}>
           ↑{gitPanel.ahead} ↓{gitPanel.behind}
         </text>
       ) : null}

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

@@ -20,7 +20,6 @@ interface SidebarProps {
   onTabActivate?: (tabId: string) => void
   onResizeDrag?: (event: OtuiMouseEvent) => boolean
   onResizeDragEnd?: () => void
-  onSidebarResizeStart?: (info: { initialWidth: number; screenStart: number }) => void
   onEmbeddedGitResizeStart?: (info: {
     containerStart: number
     position: 'top' | 'bottom'
@@ -32,7 +31,7 @@ const GUTTER_START = '╭'
 const GUTTER_MIDDLE = '├'
 const GUTTER_END = '╰'
 const GUTTER_PAD = '│'
-const RESIZE_HANDLE = '│'
+const RESIZE_HANDLE = '─'
 
 function getRowBackground({
   alternate,
@@ -60,14 +59,20 @@ const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: nu
 
   return (
     <box flexDirection="column" flexShrink={0} gap={0}>
-      <text fg={t.text}>
+      <text fg={t.text} selectable={false}>
         <strong>aimux</strong>
       </text>
-      <text fg={t.text}>{currentSession ? currentSession.name : 'No workspace selected'}</text>
+      <text fg={t.text} selectable={false}>
+        {currentSession ? currentSession.name : 'No workspace selected'}
+      </text>
       {branch ? (
         <box flexDirection="row">
-          <text fg={t.text}>{'\u{e702}'} </text>
-          <text fg={t.text}>{branch}</text>
+          <text fg={t.text} selectable={false}>
+            {'\u{e702}'}{' '}
+          </text>
+          <text fg={t.text} selectable={false}>
+            {branch}
+          </text>
         </box>
       ) : null}
       <box
@@ -81,9 +86,13 @@ const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: nu
           dispatchGlobal({ type: 'open-new-tab-modal' })
         }}
       >
-        <text fg={t.text}>+ New assistant</text>
+        <text fg={t.text} selectable={false}>
+          + New assistant
+        </text>
       </box>
-      <text fg={t.textMuted}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
+      <text fg={t.textMuted} selectable={false}>
+        {'·'.repeat(Math.max(0, contentWidth - 2))}
+      </text>
     </box>
   )
 })
@@ -92,11 +101,13 @@ function renderGroupGutter(isGroupStart: boolean, isGroupMiddle: boolean, isGrou
   const t = getCurrentTheme()
   return (
     <box flexDirection="column" width={1} overflow="hidden">
-      <text fg={t.border}>
+      <text fg={t.border} selectable={false}>
         {/* oxlint-disable-next-line no-nested-ternary */}
         {isGroupStart ? GUTTER_START : isGroupMiddle ? GUTTER_MIDDLE : GUTTER_PAD}
       </text>
-      <text fg={t.border}>{isGroupEnd ? GUTTER_END : GUTTER_PAD}</text>
+      <text fg={t.border} selectable={false}>
+        {isGroupEnd ? GUTTER_END : GUTTER_PAD}
+      </text>
     </box>
   )
 }
@@ -136,7 +147,9 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
     >
       {tabs.length === 0 ? (
         <box paddingTop={1}>
-          <text fg={t.textMuted}>No tabs yet. Press Ctrl+n.</text>
+          <text fg={t.textMuted} selectable={false}>
+            No tabs yet. Press Ctrl+n.
+          </text>
         </box>
       ) : (
         tabs.map((tab, index) => {
@@ -181,7 +194,6 @@ export function Sidebar({
   onEmbeddedGitResizeStart,
   onResizeDrag,
   onResizeDragEnd,
-  onSidebarResizeStart,
   onTabActivate,
 }: SidebarProps) {
   const t = useTheme()
@@ -213,7 +225,11 @@ export function Sidebar({
   const tabsGrow = gitEmbedded ? Math.max(1, Math.round((1 - gitPane.embeddedRatio) * 100)) : 1
   const gitGrow = gitEmbedded ? Math.max(1, Math.round(gitPane.embeddedRatio * 100)) : 0
 
-  const separator = <text fg={t.textMuted}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
+  const separator = (
+    <text fg={t.textMuted} selectable={false}>
+      {'·'.repeat(Math.max(0, contentWidth - 2))}
+    </text>
+  )
   const gitBody = gitEmbedded ? (
     <ContextMenuBox
       flexDirection="column"
@@ -230,7 +246,6 @@ export function Sidebar({
     <box
       minHeight={1}
       flexShrink={0}
-      backgroundColor={t.border}
       onMouseDown={(event) => {
         const body = bodyRef.current
         if (!body) return
@@ -243,7 +258,9 @@ export function Sidebar({
         })
       }}
     >
-      <text fg={t.border}>{RESIZE_HANDLE.repeat(Math.max(1, contentWidth))}</text>
+      <text fg={t.border} selectable={false}>
+        {RESIZE_HANDLE.repeat(Math.max(1, contentWidth))}
+      </text>
     </box>
   ) : null
 
@@ -309,17 +326,6 @@ export function Sidebar({
           </box>
           {!gitEmbedded ? separator : null}
         </box>
-        <box
-          height="100%"
-          width={1}
-          flexShrink={0}
-          backgroundColor={t.border}
-          onMouseDown={(event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            onSidebarResizeStart?.({ initialWidth: sidebarWidth, screenStart: event.x })
-          }}
-        />
       </box>
     </ContextMenuBox>
   )

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

@@ -49,22 +49,38 @@ function getIndicatorColor(active: boolean, focused: boolean, inLayout: boolean)
 function BusyIndicator() {
   const t = useTheme()
   const frame = useBusySpinner()
-  return <text fg={t.primary}>{frame} working</text>
+  return (
+    <text fg={t.primary} selectable={false}>
+      {frame} working
+    </text>
+  )
 }
 
 function WaitingIndicator() {
   const t = useTheme()
-  return <text fg={t.warning}>? waiting</text>
+  return (
+    <text fg={t.warning} selectable={false}>
+      ? waiting
+    </text>
+  )
 }
 
 function ActivityIndicator({ tab }: { tab: TabSession }) {
   const t = useTheme()
   if (tab.status === 'error') {
-    return <text fg={t.error}>✗ error</text>
+    return (
+      <text fg={t.error} selectable={false}>
+        ✗ error
+      </text>
+    )
   }
 
   if (tab.status === 'disconnected') {
-    return <text fg={t.warning}>⏸ restore</text>
+    return (
+      <text fg={t.warning} selectable={false}>
+        ⏸ restore
+      </text>
+    )
   }
 
   if (tab.activity === 'working') {
@@ -76,10 +92,18 @@ function ActivityIndicator({ tab }: { tab: TabSession }) {
   }
 
   if (tab.activity === 'idle') {
-    return <text fg={t.success}>● idle</text>
+    return (
+      <text fg={t.success} selectable={false}>
+        ● idle
+      </text>
+    )
   }
 
-  return <text fg={getStatusColor(tab.status)}>{tab.status}</text>
+  return (
+    <text fg={getStatusColor(tab.status)} selectable={false}>
+      {tab.status}
+    </text>
+  )
 }
 
 export function TabItem({ active, focused, id, inLayout, tab }: TabItemProps) {
@@ -133,9 +157,13 @@ export function TabItem({ active, focused, id, inLayout, tab }: TabItemProps) {
       onMouseOut={() => setHovered(false)}
     >
       <box flexDirection="row" alignItems="center">
-        <text fg={indicatorColor}>{indicator} </text>
+        <text fg={indicatorColor} selectable={false}>
+          {indicator}{' '}
+        </text>
         <box flexGrow={1}>
-          <text fg={active ? t.text : t.textMuted}>{tab.title}</text>
+          <text fg={active ? t.text : t.textMuted} selectable={false}>
+            {tab.title}
+          </text>
         </box>
         {hovered ? (
           <box
@@ -145,12 +173,17 @@ export function TabItem({ active, focused, id, inLayout, tab }: TabItemProps) {
               runSideEffectGlobal({ tabId: tab.id, type: 'close-tab' })
             }}
           >
-            <text fg={t.textMuted}>×</text>
+            <text fg={t.textMuted} selectable={false}>
+              ×
+            </text>
           </box>
         ) : null}
       </box>
       <box flexDirection="row">
-        <text fg={t.textMuted}> {label} </text>
+        <text fg={t.textMuted} selectable={false}>
+          {' '}
+          {label}{' '}
+        </text>
         <ActivityIndicator tab={tab} />
       </box>
     </ContextMenuBox>

package/src/ui/components/layout/split-layout.tsx

@@ -38,6 +38,7 @@ interface SplitLayoutProps {
   }) => void
   onSeparatorDrag?: (event: OtuiMouseEvent) => boolean
   onSeparatorDragEnd?: () => void
+  onLeftEdgeMouseDown?: (event: OtuiMouseEvent) => boolean
   contentOrigin: TerminalContentOrigin
   bounds: PaneRect
 }
@@ -50,6 +51,7 @@ export function SplitLayout({
   localScrollbackEnabled,
   mouseForwardingEnabled,
   node,
+  onLeftEdgeMouseDown,
   onPaneActivate,
   onSeparatorDrag,
   onSeparatorDragEnd,
@@ -101,6 +103,7 @@ export function SplitLayout({
         onPaneActivate={onPaneActivate}
         onSeparatorDrag={onSeparatorDrag}
         onSeparatorDragEnd={onSeparatorDragEnd}
+        onLeftEdgeMouseDown={onLeftEdgeMouseDown}
       />
     )
   }
@@ -116,6 +119,10 @@ export function SplitLayout({
   const firstBounds = subtreeBounds(node.first, rects, bounds)
   const secondBounds = subtreeBounds(node.second, rects, bounds)
 
+  // For vertical splits only the first subtree is leftmost; for horizontal
+  // splits both first and second start at the same x.
+  const secondLeftEdgeMouseDown = node.direction === 'horizontal' ? onLeftEdgeMouseDown : undefined
+
   return (
     <box flexDirection={flexDir} flexGrow={1} gap={0}>
       <box flexGrow={firstGrow} flexDirection="column" overflow="hidden">
@@ -136,6 +143,7 @@ export function SplitLayout({
           onSeparatorDragStart={onSeparatorDragStart}
           onSeparatorDrag={onSeparatorDrag}
           onSeparatorDragEnd={onSeparatorDragEnd}
+          onLeftEdgeMouseDown={onLeftEdgeMouseDown}
           contentOrigin={contentOrigin}
           bounds={firstBounds}
         />
@@ -178,6 +186,7 @@ export function SplitLayout({
           onSeparatorDragStart={onSeparatorDragStart}
           onSeparatorDrag={onSeparatorDrag}
           onSeparatorDragEnd={onSeparatorDragEnd}
+          onLeftEdgeMouseDown={secondLeftEdgeMouseDown}
           contentOrigin={contentOrigin}
           bounds={secondBounds}
         />

package/src/ui/components/layout/terminal-pane.tsx

@@ -27,6 +27,7 @@ interface TerminalPaneProps {
   onPaneActivate?: (tabId: string) => void
   onSeparatorDrag?: (event: OtuiMouseEvent) => boolean
   onSeparatorDragEnd?: () => void
+  onLeftEdgeMouseDown?: (event: OtuiMouseEvent) => boolean
 }
 
 function getTitle(
@@ -110,6 +111,7 @@ export function TerminalPane({
   isActive,
   localScrollbackEnabled,
   mouseForwardingEnabled,
+  onLeftEdgeMouseDown,
   onPaneActivate,
   onSeparatorDrag,
   onSeparatorDragEnd,
@@ -155,6 +157,11 @@ export function TerminalPane({
         ],
       ]
     : undefined
+  const isOnPaneBorder = (event: OtuiMouseEvent) =>
+    event.x === contentOrigin.x - 1 ||
+    event.x === contentOrigin.x + contentOrigin.cols ||
+    event.y === contentOrigin.y - 1 ||
+    event.y === contentOrigin.y + contentOrigin.rows
   const forwardMouseEvent = (event: OtuiMouseEvent) => {
     if (event.type === 'down' && event.button === 2 && rightClickMenu) {
       event.preventDefault()
@@ -162,6 +169,27 @@ export function TerminalPane({
       openContextMenu(event.x, event.y, rightClickMenu)
       return
     }
+    if (
+      event.type === 'down' &&
+      event.button === 0 &&
+      onLeftEdgeMouseDown &&
+      event.x === contentOrigin.x - 1
+    ) {
+      if (onLeftEdgeMouseDown(event)) {
+        event.preventDefault()
+        event.stopPropagation()
+        return
+      }
+    }
+    // Absorb left-button clicks on pane borders — they should not focus the
+    // pane or be forwarded to the terminal. This keeps borders available for
+    // resize actions (split separators, sidebar edge) without conflicting
+    // with focus-on-click behavior in the content area.
+    if (event.type === 'down' && event.button === 0 && isOnPaneBorder(event)) {
+      event.preventDefault()
+      event.stopPropagation()
+      return
+    }
     if (event.type === 'down') {
       logInputDebug('pane.mouseDown', {
         button: event.button,

package/src/ui/root.tsx

@@ -271,6 +271,17 @@ export function RootView({
   const gitPaneVisible = useAppStore((s) => s.gitPane.visible)
   const gitPanePosition = useAppStore((s) => s.gitPane.position)
   const gitPaneRatio = useAppStore((s) => s.gitPane.paneRatio)
+  const sidebarWidth = useAppStore((s) => s.sidebar.width)
+  const sidebarVisible = useAppStore((s) => s.sidebar.visible)
+
+  const gitPaneInPaneOnLeft = gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'left'
+  const handleTerminalLeftEdgeMouseDown =
+    sidebarVisible && !gitPaneInPaneOnLeft && onSidebarResizeStart
+      ? (event: MouseEvent) => {
+          onSidebarResizeStart({ initialWidth: sidebarWidth, screenStart: event.x })
+          return true
+        }
+      : undefined
 
   const activeTab = tabs.find((tab) => tab.id === activeTabId)
   const activeTree = activeTabId ? getTreeForTab(layoutTrees, tabGroupMap, activeTabId) : null
@@ -331,7 +342,6 @@ export function RootView({
           onEmbeddedGitResizeStart={onEmbeddedGitResizeStart}
           onResizeDrag={onSeparatorDrag}
           onResizeDragEnd={onSeparatorDragEnd}
-          onSidebarResizeStart={onSidebarResizeStart}
         />
         {gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'left' ? (
           <GitPaneInPaneMode
@@ -364,6 +374,7 @@ export function RootView({
             onSeparatorDragStart={onSeparatorDragStart}
             onSeparatorDrag={onSeparatorDrag}
             onSeparatorDragEnd={onSeparatorDragEnd}
+            onLeftEdgeMouseDown={handleTerminalLeftEdgeMouseDown}
             bounds={{
               cols: terminalCols + splitChrome,
               rows: terminalRows + splitChrome,
@@ -386,6 +397,7 @@ export function RootView({
             onTerminalDrag={onTerminalDrag}
             onTerminalMouseUp={onTerminalMouseUp}
             onPaneActivate={onPaneActivate}
+            onLeftEdgeMouseDown={handleTerminalLeftEdgeMouseDown}
           />
         )}
         {gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'right' ? (