@brimveyn/aimux 1.7.3 → 1.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brimveyn/aimux",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "description": "A terminal multiplexer for AI CLIs. Run Claude, Codex, OpenCode side-by-side with tabbed navigation, split panes, and persistent sessions.",
   "keywords": [
     "ai",
@@ -60,7 +60,7 @@
     "bump": "bun run scripts/bump.ts"
   },
   "dependencies": {
-    "@brimveyn/aimux-config": "0.4.5",
+    "@brimveyn/aimux-config": "0.4.6",
     "@opentui/core": "^0.1.90",
     "@opentui/react": "^0.1.90",
     "@xterm/headless": "^6.0.0",

package/src/app-runtime/side-effects.ts

@@ -477,14 +477,17 @@ export function executeSideEffect(effect: SideEffect, ctx: SideEffectContext): v
     case 'persist-git-diff-mode-ratio': {
       const config = loadConfig()
       const persistedGitPane = config.gitPane
+      const paneRatio = persistedGitPane?.paneRatio ?? persistedGitPane?.ratio ?? 0.5
+      const embeddedRatio = persistedGitPane?.embeddedRatio ?? persistedGitPane?.ratio ?? 0.5
       saveConfig({
         ...config,
         gitPane: {
           diffModeRatio: effect.ratio,
+          embeddedRatio,
           fileListMode: persistedGitPane?.fileListMode,
           mode: persistedGitPane?.mode ?? 'embedded',
+          paneRatio,
           position: persistedGitPane?.position ?? 'bottom',
-          ratio: persistedGitPane?.ratio ?? 0.5,
           treeCompaction: persistedGitPane?.treeCompaction,
           visible: persistedGitPane?.visible ?? true,
         },
@@ -494,14 +497,17 @@ export function executeSideEffect(effect: SideEffect, ctx: SideEffectContext): v
     case 'persist-git-file-list-mode': {
       const config = loadConfig()
       const persistedGitPane = config.gitPane
+      const paneRatio = persistedGitPane?.paneRatio ?? persistedGitPane?.ratio ?? 0.5
+      const embeddedRatio = persistedGitPane?.embeddedRatio ?? persistedGitPane?.ratio ?? 0.5
       saveConfig({
         ...config,
         gitPane: {
           diffModeRatio: persistedGitPane?.diffModeRatio,
+          embeddedRatio,
           fileListMode: effect.mode,
           mode: persistedGitPane?.mode ?? 'embedded',
+          paneRatio,
           position: persistedGitPane?.position ?? 'bottom',
-          ratio: persistedGitPane?.ratio ?? 0.5,
           treeCompaction: persistedGitPane?.treeCompaction,
           visible: persistedGitPane?.visible ?? true,
         },
@@ -511,14 +517,17 @@ export function executeSideEffect(effect: SideEffect, ctx: SideEffectContext): v
     case 'persist-git-tree-compaction': {
       const config = loadConfig()
       const persistedGitPane = config.gitPane
+      const paneRatio = persistedGitPane?.paneRatio ?? persistedGitPane?.ratio ?? 0.5
+      const embeddedRatio = persistedGitPane?.embeddedRatio ?? persistedGitPane?.ratio ?? 0.5
       saveConfig({
         ...config,
         gitPane: {
           diffModeRatio: persistedGitPane?.diffModeRatio,
+          embeddedRatio,
           fileListMode: persistedGitPane?.fileListMode,
           mode: persistedGitPane?.mode ?? 'embedded',
+          paneRatio,
           position: persistedGitPane?.position ?? 'bottom',
-          ratio: persistedGitPane?.ratio ?? 0.5,
           treeCompaction: effect.enabled,
           visible: persistedGitPane?.visible ?? true,
         },

package/src/app-runtime/split-drag-controller.ts

@@ -2,6 +2,8 @@ import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
 
 import type { SplitDirection } from '../state/layout-tree'
 
+type ScreenAxis = 'x' | 'y'
+
 export interface SplitDragState {
   tabId: string
   direction: SplitDirection
@@ -9,7 +11,35 @@ export interface SplitDragState {
   totalSize: number
 }
 
+export interface AxisDragState {
+  axis: ScreenAxis
+  screenStart: number
+}
+
+export interface AnchoredRatioDragState {
+  anchor: 'start' | 'end'
+  axis: ScreenAxis
+  screenStart: number
+  totalSize: number
+}
+
+function getScreenPosition(event: OtuiMouseEvent, axis: ScreenAxis): number {
+  return axis === 'x' ? event.x : event.y
+}
+
 export function getSplitRatioFromDrag(event: OtuiMouseEvent, drag: SplitDragState): number {
-  const position = drag.direction === 'vertical' ? event.x : event.y
+  const position = getScreenPosition(event, drag.direction === 'vertical' ? 'x' : 'y')
   return (position - drag.screenStart) / drag.totalSize
 }
+
+export function getAxisDeltaFromDrag(event: OtuiMouseEvent, drag: AxisDragState): number {
+  return getScreenPosition(event, drag.axis) - drag.screenStart
+}
+
+export function getAnchoredRatioFromDrag(
+  event: OtuiMouseEvent,
+  drag: AnchoredRatioDragState
+): number {
+  const offset = getScreenPosition(event, drag.axis) - drag.screenStart
+  return drag.anchor === 'start' ? offset / drag.totalSize : 1 - offset / drag.totalSize
+}

package/src/app-runtime/use-mouse-handlers.ts

@@ -16,9 +16,22 @@ import {
   resolveClickSelection,
 } from './click-selection-resolver'
 import { requestRenderUpTree } from './render-invalidation'
-import { getSplitRatioFromDrag, type SplitDragState } from './split-drag-controller'
+import {
+  type AnchoredRatioDragState,
+  type AxisDragState,
+  getAnchoredRatioFromDrag,
+  getAxisDeltaFromDrag,
+  getSplitRatioFromDrag,
+  type SplitDragState,
+} from './split-drag-controller'
 import { getForwardedMouseSequence, getScrollViewportDelta } from './terminal-mouse-adapter'
 
+type ResizeDragState =
+  | ({ kind: 'split' } & SplitDragState)
+  | ({ initialWidth: number; kind: 'sidebar' } & AxisDragState)
+  | ({ initialWidth: number; kind: 'git-pane'; side: 'left' | 'right' } & AxisDragState)
+  | ({ kind: 'embedded-git'; position: 'top' | 'bottom' } & AnchoredRatioDragState)
+
 interface UseMouseHandlersOptions {
   state: AppState
   dispatch: (action: AppAction) => void
@@ -68,7 +81,7 @@ export function useMouseHandlers({
   renderer,
   state,
 }: UseMouseHandlersOptions) {
-  const separatorDragRef = useRef<SplitDragState | null>(null)
+  const separatorDragRef = useRef<ResizeDragState | null>(null)
   const multiClickRef = useRef(new MultiClickDetector())
 
   const handleTerminalMouseEvent = (event: OtuiMouseEvent, origin: TerminalContentOrigin) => {
@@ -113,7 +126,45 @@ export function useMouseHandlers({
     screenStart: number
     totalSize: number
   }) => {
-    separatorDragRef.current = info
+    separatorDragRef.current = { kind: 'split', ...info }
+  }
+
+  const handleSidebarResizeStart = (info: { initialWidth: number; screenStart: number }) => {
+    separatorDragRef.current = {
+      axis: 'x',
+      initialWidth: info.initialWidth,
+      kind: 'sidebar',
+      screenStart: info.screenStart,
+    }
+  }
+
+  const handleGitPaneResizeStart = (info: {
+    initialWidth: number
+    screenStart: number
+    side: 'left' | 'right'
+  }) => {
+    separatorDragRef.current = {
+      axis: 'x',
+      initialWidth: info.initialWidth,
+      kind: 'git-pane',
+      screenStart: info.screenStart,
+      side: info.side,
+    }
+  }
+
+  const handleEmbeddedGitResizeStart = (info: {
+    containerStart: number
+    position: 'top' | 'bottom'
+    totalSize: number
+  }) => {
+    separatorDragRef.current = {
+      anchor: info.position === 'top' ? 'start' : 'end',
+      axis: 'y',
+      kind: 'embedded-git',
+      position: info.position,
+      screenStart: info.containerStart,
+      totalSize: info.totalSize,
+    }
   }
 
   const handleSeparatorDrag = (event: OtuiMouseEvent): boolean => {
@@ -122,8 +173,42 @@ export function useMouseHandlers({
       return false
     }
 
-    const newRatio = getSplitRatioFromDrag(event, drag)
-    dispatch({ axis: drag.direction, ratio: newRatio, tabId: drag.tabId, type: 'set-split-ratio' })
+    switch (drag.kind) {
+      case 'split': {
+        const newRatio = getSplitRatioFromDrag(event, drag)
+        dispatch({
+          axis: drag.direction,
+          ratio: newRatio,
+          tabId: drag.tabId,
+          type: 'set-split-ratio',
+        })
+        break
+      }
+      case 'sidebar': {
+        const nextWidth = Math.round(drag.initialWidth + getAxisDeltaFromDrag(event, drag))
+        dispatch({ type: 'set-sidebar-width', width: nextWidth })
+        break
+      }
+      case 'git-pane': {
+        const delta = getAxisDeltaFromDrag(event, drag)
+        const direction = drag.side === 'left' ? 1 : -1
+        const nextWidth = drag.initialWidth + delta * direction
+        dispatch({
+          ratio: nextWidth / 80,
+          target: 'pane',
+          type: 'set-git-pane-ratio',
+        })
+        break
+      }
+      case 'embedded-git': {
+        dispatch({
+          ratio: getAnchoredRatioFromDrag(event, drag),
+          target: 'embedded',
+          type: 'set-git-pane-ratio',
+        })
+        break
+      }
+    }
     return true
   }
 
@@ -171,10 +256,13 @@ export function useMouseHandlers({
   }
 
   return {
+    handleEmbeddedGitResizeStart,
+    handleGitPaneResizeStart,
     handlePaneActivate,
     handleSeparatorDrag,
     handleSeparatorDragEnd,
     handleSeparatorDragStart,
+    handleSidebarResizeStart,
     handleSplitResize,
     handleTerminalClick,
     handleTerminalMouseEvent,

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

@@ -4,6 +4,7 @@ import type { TerminalContentOrigin } from '../input/raw-input-handler'
 import type { SessionBackend } from '../session-backend/types'
 import type { AppAction, AppState, ScrollIntent } from '../state/types'
 
+import { getGitPaneWidthFromRatio } from '../state/git-pane-sizing'
 import {
   createTerminalBounds,
   forEachSplitPaneRect,
@@ -140,8 +141,7 @@ export function useTerminalResize({
       STATUS_BAR_HEIGHT +
       TERMINAL_PANE_VERTICAL_CHROME +
       sessionBarRows
-    const gitPaneRaw = gitPaneInPaneMode ? Math.round(state.gitPane.ratio * 80) : 0
-    const gitPaneWidth = gitPaneInPaneMode ? Math.max(20, Math.min(80, gitPaneRaw)) : 0
+    const gitPaneWidth = gitPaneInPaneMode ? getGitPaneWidthFromRatio(state.gitPane.paneRatio) : 0
     const gitOnLeft = gitPaneInPaneMode && state.gitPane.position === 'left'
     const cols = Math.max(
       MIN_TERMINAL_COLS,
@@ -167,7 +167,7 @@ export function useTerminalResize({
     state.sessionBar.position,
     gitPaneInPaneMode,
     state.gitPane.position,
-    state.gitPane.ratio,
+    state.gitPane.paneRatio,
   ])
 
   useLayoutEffect(() => {
@@ -196,7 +196,7 @@ export function useTerminalResize({
     state.sessionBar.position,
     gitPaneInPaneMode,
     state.gitPane.position,
-    state.gitPane.ratio,
+    state.gitPane.paneRatio,
   ])
 
   useEffect(() => {

package/src/app.tsx

@@ -88,16 +88,25 @@ export function App({
     const diffModeRatio = userGitPane?.diffModeRatio ?? json.gitPane?.diffModeRatio ?? 0.35
     const treeCompaction = userGitPane?.treeCompaction ?? json.gitPane?.treeCompaction ?? true
     const prefetchRadius = userGitPane?.prefetchRadius ?? json.gitPane?.prefetchRadius ?? 5
+    const persistedPaneRatio = json.gitPane?.paneRatio ?? json.gitPane?.ratio ?? 0.5
+    const persistedEmbeddedRatio = json.gitPane?.embeddedRatio ?? json.gitPane?.ratio ?? 0.5
     const gitPaneOverrides = {
       ...json.gitPane,
       diffModeRatio,
+      embeddedRatio:
+        userGitPane?.mode === 'embedded' && userGitPane?.ratio !== undefined
+          ? userGitPane.ratio
+          : persistedEmbeddedRatio,
       fileListMode,
+      paneRatio:
+        userGitPane?.mode === 'pane' && userGitPane?.ratio !== undefined
+          ? userGitPane.ratio
+          : persistedPaneRatio,
       prefetchRadius,
       treeCompaction,
       ...(userGitPane?.visible !== undefined ? { visible: userGitPane.visible } : {}),
       ...(userGitPane?.mode !== undefined ? { mode: userGitPane.mode } : {}),
       ...(userGitPane?.position !== undefined ? { position: userGitPane.position } : {}),
-      ...(userGitPane?.ratio !== undefined ? { ratio: userGitPane.ratio } : {}),
       ...(userGitPane?.diffModeRatio !== undefined
         ? { diffModeRatio: userGitPane.diffModeRatio }
         : {}),
@@ -210,10 +219,13 @@ export function App({
   })
 
   const {
+    handleEmbeddedGitResizeStart,
+    handleGitPaneResizeStart,
     handlePaneActivate,
     handleSeparatorDrag,
     handleSeparatorDragEnd,
     handleSeparatorDragStart,
+    handleSidebarResizeStart,
     handleSplitResize,
     handleTerminalClick,
     handleTerminalMouseEvent,
@@ -349,9 +361,12 @@ export function App({
         onTerminalClick={handleTerminalClick}
         onPaneActivate={handlePaneActivate}
         onSplitResize={handleSplitResize}
+        onEmbeddedGitResizeStart={handleEmbeddedGitResizeStart}
+        onGitPaneResizeStart={handleGitPaneResizeStart}
         onSeparatorDragStart={handleSeparatorDragStart}
         onSeparatorDrag={handleSeparatorDrag}
         onSeparatorDragEnd={handleSeparatorDragEnd}
+        onSidebarResizeStart={handleSidebarResizeStart}
         terminalCols={terminalSize.cols}
         terminalRows={terminalSize.rows}
       />

package/src/config.ts

@@ -22,7 +22,9 @@ export interface PersistedGitPane {
   visible: boolean
   mode: 'embedded' | 'pane'
   position: 'top' | 'bottom' | 'left' | 'right'
-  ratio: number
+  paneRatio?: number
+  embeddedRatio?: number
+  ratio?: number
 }
 
 export interface AimuxConfig {
@@ -47,7 +49,20 @@ function isPersistedGitPane(value: unknown): value is PersistedGitPane {
     v.position === 'left' ||
     v.position === 'right'
   const ratioOk =
-    typeof v.ratio === 'number' && Number.isFinite(v.ratio) && v.ratio > 0 && v.ratio < 1
+    v.ratio === undefined ||
+    (typeof v.ratio === 'number' && Number.isFinite(v.ratio) && v.ratio > 0 && v.ratio < 1)
+  const paneRatioOk =
+    v.paneRatio === undefined ||
+    (typeof v.paneRatio === 'number' &&
+      Number.isFinite(v.paneRatio) &&
+      v.paneRatio > 0 &&
+      v.paneRatio < 1)
+  const embeddedRatioOk =
+    v.embeddedRatio === undefined ||
+    (typeof v.embeddedRatio === 'number' &&
+      Number.isFinite(v.embeddedRatio) &&
+      v.embeddedRatio > 0 &&
+      v.embeddedRatio < 1)
   const diffModeRatioOk =
     v.diffModeRatio === undefined ||
     (typeof v.diffModeRatio === 'number' &&
@@ -68,6 +83,8 @@ function isPersistedGitPane(value: unknown): value is PersistedGitPane {
     !modeOk ||
     !positionOk ||
     !ratioOk ||
+    !paneRatioOk ||
+    !embeddedRatioOk ||
     !diffModeRatioOk ||
     !visibleOk ||
     !fileListModeOk ||
@@ -169,7 +186,9 @@ export function loadConfigResult(): ConfigLoadResult {
           : undefined
       if (legacyVisible !== undefined || legacyRatio !== undefined) {
         validGitPane = {
+          embeddedRatio: legacyRatio ?? 0.5,
           mode: 'embedded',
+          paneRatio: legacyRatio ?? 0.5,
           position: 'bottom',
           ratio: legacyRatio ?? 0.5,
           visible: legacyVisible ?? true,

package/src/state/git-pane-sizing.ts

@@ -0,0 +1,15 @@
+export const GIT_PANE_MIN_RATIO = 0.2
+export const GIT_PANE_MAX_RATIO = 0.8
+export const GIT_PANE_MIN_WIDTH = 20
+export const GIT_PANE_MAX_WIDTH = 80
+
+export function clampGitPaneRatio(value: number): number {
+  return Math.max(GIT_PANE_MIN_RATIO, Math.min(GIT_PANE_MAX_RATIO, value))
+}
+
+export function getGitPaneWidthFromRatio(ratio: number): number {
+  return Math.max(
+    GIT_PANE_MIN_WIDTH,
+    Math.min(GIT_PANE_MAX_WIDTH, Math.round(clampGitPaneRatio(ratio) * GIT_PANE_MAX_WIDTH))
+  )
+}

package/src/state/reducers/git-panel-state.ts

@@ -1,11 +1,9 @@
 import type { AppAction, AppState, GitFileEntry, GitFileSection, GitPanelState } from '../types'
 
+import { clampGitPaneRatio } from '../git-pane-sizing'
 import { reconcileSelectedGitEntryKey } from '../git-tree'
 import { clearDiffCacheForPaths } from './diff-cache'
 
-export const GIT_PANEL_MIN_RATIO = 0.2
-export const GIT_PANEL_MAX_RATIO = 0.8
-
 const SECTION_RANK: Record<GitFileSection, number> = {
   historical: 0,
   staged: 1,
@@ -23,7 +21,7 @@ export function sortFilesBySection(files: GitFileEntry[]): GitFileEntry[] {
 }
 
 function clampRatio(value: number): number {
-  return Math.max(GIT_PANEL_MIN_RATIO, Math.min(GIT_PANEL_MAX_RATIO, value))
+  return clampGitPaneRatio(value)
 }
 
 export function emptyGitPanel(): GitPanelState {
@@ -93,9 +91,16 @@ export function reduceGitPanelState(state: AppState, action: AppAction): AppStat
       }
     }
     case 'resize-git-pane': {
-      const nextRatio = clampRatio(state.gitPane.ratio + action.delta)
-      if (nextRatio === state.gitPane.ratio) return state
-      return { ...state, gitPane: { ...state.gitPane, ratio: nextRatio } }
+      const target = state.gitPane.mode === 'pane' ? 'paneRatio' : 'embeddedRatio'
+      const nextRatio = clampRatio(state.gitPane[target] + action.delta)
+      if (nextRatio === state.gitPane[target]) return state
+      return { ...state, gitPane: { ...state.gitPane, [target]: nextRatio } }
+    }
+    case 'set-git-pane-ratio': {
+      const key = action.target === 'pane' ? 'paneRatio' : 'embeddedRatio'
+      const nextRatio = clampRatio(action.ratio)
+      if (nextRatio === state.gitPane[key]) return state
+      return { ...state, gitPane: { ...state.gitPane, [key]: nextRatio } }
     }
     case 'resize-git-diff-pane': {
       const nextRatio = clampRatio(state.gitPane.diffModeRatio + action.delta)

package/src/state/reducers/ui-state.ts

@@ -9,6 +9,12 @@ export function reduceUIState(state: AppState, action: AppAction): AppState | nu
         state.sidebar.maxWidth,
         Math.max(state.sidebar.minWidth, state.sidebar.width + action.delta)
       )
+      if (width === state.sidebar.width) return state
+      return { ...state, sidebar: { ...state.sidebar, width } }
+    }
+    case 'set-sidebar-width': {
+      const width = Math.min(state.sidebar.maxWidth, Math.max(state.sidebar.minWidth, action.width))
+      if (width === state.sidebar.width) return state
       return { ...state, sidebar: { ...state.sidebar, width } }
     }
     case 'set-focus-mode':

package/src/state/store.ts

@@ -34,12 +34,13 @@ export interface InitialStateOverrides {
 const DEFAULT_GIT_PANE: GitPaneState = {
   diffCount: { enabled: true },
   diffModeRatio: 0.35,
+  embeddedRatio: 0.5,
   fileListMode: 'tree',
   mode: 'embedded',
+  paneRatio: 0.5,
   path: { enabled: true },
   position: 'bottom',
   prefetchRadius: 5,
-  ratio: 0.5,
   treeCompaction: true,
   visible: true,
 }

package/src/state/types.ts

@@ -166,7 +166,8 @@ export interface GitPaneState {
   visible: boolean
   mode: GitPaneMode
   position: GitPanePosition
-  ratio: number
+  paneRatio: number
+  embeddedRatio: number
   diffModeRatio: number
   fileListMode: GitFileListMode
   treeCompaction: boolean
@@ -500,10 +501,12 @@ export type LayoutAction =
 export type UIAction =
   | { type: 'toggle-sidebar' }
   | { type: 'resize-sidebar'; delta: number }
+  | { type: 'set-sidebar-width'; width: number }
   | { type: 'set-focus-mode'; focusMode: FocusMode }
   | { type: 'set-terminal-size'; cols: number; rows: number }
   | { type: 'toggle-git-pane' }
   | { type: 'resize-git-pane'; delta: number }
+  | { type: 'set-git-pane-ratio'; target: 'pane' | 'embedded'; ratio: number }
   | { type: 'resize-git-diff-pane'; delta: number }
   | { type: 'set-git-pane-mode'; mode: GitPaneMode }
   | { type: 'set-git-pane-position'; position: GitPanePosition }

package/src/state/workspace-save.ts

@@ -26,10 +26,11 @@ export function saveCurrentWorkspace(state: AppState): void {
     customCommands: state.customCommands,
     gitPane: {
       diffModeRatio: state.gitPane.diffModeRatio,
+      embeddedRatio: state.gitPane.embeddedRatio,
       fileListMode: state.gitPane.fileListMode,
       mode: state.gitPane.mode,
+      paneRatio: state.gitPane.paneRatio,
       position: state.gitPane.position,
-      ratio: state.gitPane.ratio,
       visible: state.gitPane.visible,
     },
     sessionBarPosition: state.sessionBar.position,

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

@@ -53,8 +53,10 @@ export function ContextMenuOverlay() {
   const maxLabel = Math.max(...menu.items.map(([label]) => label.length))
   const width = maxLabel + 4
   const height = menu.items.length + 2
-  const left = Math.max(0, Math.min(menu.anchorX, terminalCols - width))
-  const top = Math.max(0, Math.min(menu.anchorY, terminalRows - height))
+  const left =
+    menu.anchorX + width <= terminalCols ? menu.anchorX : Math.max(0, menu.anchorX - width)
+  const top =
+    menu.anchorY + height <= terminalRows ? menu.anchorY : Math.max(0, menu.anchorY - height)
 
   return (
     <box position="absolute" top={0} left={0} width="100%" height="100%">

package/src/ui/components/git-pane-context-menu.ts

@@ -0,0 +1,26 @@
+import type { GitPaneMode, GitPanePosition, GitPaneState } from '../../state/types'
+import type { ContextMenuItem } from '../context-menu/controller'
+
+const GIT_PANE_MENU_OPTIONS: Array<{
+  label: string
+  mode: GitPaneMode
+  position: GitPanePosition
+}> = [
+  { label: 'Move to top', mode: 'embedded', position: 'top' },
+  { label: 'Move to bottom', mode: 'embedded', position: 'bottom' },
+  { label: 'Move to left', mode: 'pane', position: 'left' },
+  { label: 'Move to right', mode: 'pane', position: 'right' },
+]
+
+export function buildGitPaneContextMenu(
+  gitPane: Pick<GitPaneState, 'mode' | 'position'>,
+  onToggle: () => void,
+  onMove: (mode: GitPaneMode, position: GitPanePosition) => void
+): ContextMenuItem[] {
+  return [
+    ['Toggle', onToggle],
+    ...GIT_PANE_MENU_OPTIONS.filter(
+      ({ mode, position }) => !(gitPane.mode === mode && gitPane.position === position)
+    ).map(({ label, mode, position }) => [label, () => onMove(mode, position)] as ContextMenuItem),
+  ]
+}

package/src/ui/components/sidebar.tsx

@@ -1,10 +1,15 @@
-import { type ScrollBoxRenderable } from '@opentui/core'
+import {
+  type BoxRenderable,
+  type MouseEvent as OtuiMouseEvent,
+  type ScrollBoxRenderable,
+} from '@opentui/core'
 import { memo, useMemo, useRef } from 'react'
 
 import { useAppStore } from '../../state/app-store'
 import { dispatchGlobal } from '../../state/dispatch-ref'
 import { getCurrentTokens, type ThemeTokens, useBg, useTokens } from '../theme'
 import { ContextMenuBox } from './context-menu-box'
+import { buildGitPaneContextMenu } from './git-pane-context-menu'
 import { GitPaneWidget } from './git-pane-widget'
 import { buildTabGroupInfo } from './sidebar-group-metadata'
 import { TabItem } from './tab-item'
@@ -13,12 +18,21 @@ import { useSidebarBranch } from './use-sidebar-branch'
 
 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'
+    totalSize: number
+  }) => void
 }
 
 const GUTTER_START = '╭'
 const GUTTER_MIDDLE = '├'
 const GUTTER_END = '╰'
 const GUTTER_PAD = '│'
+const RESIZE_HANDLE = '│'
 
 function getRowBackground({
   alternate,
@@ -34,9 +48,8 @@ function getRowBackground({
   return undefined
 }
 
-const SidebarTop = memo(function SidebarTop() {
+const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: number }) {
   const tokens = useTokens()
-  const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
   const currentSession = currentSessionId
@@ -70,7 +83,7 @@ const SidebarTop = memo(function SidebarTop() {
       >
         <text fg={tokens.palette.ink}>+ New assistant</text>
       </box>
-      <text fg={tokens.hover}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
+      <text fg={tokens.hover}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
     </box>
   )
 })
@@ -164,13 +177,20 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
   )
 })
 
-export function Sidebar({ onTabActivate }: SidebarProps) {
+export function Sidebar({
+  onEmbeddedGitResizeStart,
+  onResizeDrag,
+  onResizeDragEnd,
+  onSidebarResizeStart,
+  onTabActivate,
+}: SidebarProps) {
   const tokens = useTokens()
   const sidebarBg = useBg('elevated')
   const sidebarVisible = useAppStore((s) => s.sidebar.visible)
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const gitPane = useAppStore((s) => s.gitPane)
   const focusMode = useAppStore((s) => s.focusMode)
+  const bodyRef = useRef<BoxRenderable | null>(null)
 
   if (!sidebarVisible) {
     return null
@@ -179,15 +199,51 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
   const gitEmbedded = gitPane.mode === 'embedded' && gitPane.visible
   const gitOnTop = gitEmbedded && gitPane.position === 'top'
   const gitOnBottom = gitEmbedded && gitPane.position === 'bottom'
+  const contentWidth = Math.max(1, sidebarWidth - 1)
+  const gitPaneMenu = buildGitPaneContextMenu(
+    gitPane,
+    () => dispatchGlobal({ type: 'toggle-git-pane' }),
+    (mode, position) => {
+      dispatchGlobal({ mode, type: 'set-git-pane-mode' })
+      dispatchGlobal({ position, type: 'set-git-pane-position' })
+    }
+  )
 
   // flex-grow scaled by 100 (integer preferred); tabs gets (1-ratio), git gets ratio.
-  const tabsGrow = gitEmbedded ? Math.max(1, Math.round((1 - gitPane.ratio) * 100)) : 1
-  const gitGrow = gitEmbedded ? Math.max(1, Math.round(gitPane.ratio * 100)) : 0
+  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={tokens.hover}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
+  const separator = <text fg={tokens.hover}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
   const gitBody = gitEmbedded ? (
-    <box flexDirection="column" flexGrow={gitGrow} flexShrink={1} flexBasis={0} overflow="hidden">
+    <ContextMenuBox
+      flexDirection="column"
+      flexGrow={gitGrow}
+      flexShrink={1}
+      flexBasis={0}
+      overflow="hidden"
+      rightClickMenu={gitPaneMenu}
+    >
       <GitPaneWidget pollingEnabled={gitPane.visible} />
+    </ContextMenuBox>
+  ) : null
+  const embeddedHandle = gitEmbedded ? (
+    <box
+      minHeight={1}
+      flexShrink={0}
+      backgroundColor={tokens.border}
+      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),
+        })
+      }}
+    >
+      <text fg={tokens.border}>{RESIZE_HANDLE.repeat(Math.max(1, contentWidth))}</text>
     </box>
   ) : null
 
@@ -198,6 +254,7 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
       flexDirection="column"
       backgroundColor={sidebarBg}
       gap={0}
+      overflow="hidden"
       rightClickMenu={[
         ['Hide sidebar', () => dispatchGlobal({ type: 'toggle-sidebar' })],
         ['Toggle git pane', () => dispatchGlobal({ type: 'toggle-git-pane' })],
@@ -214,29 +271,56 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
           dispatchGlobal({ focusMode: 'navigation', type: 'set-focus-mode' })
         }
       }}
+      onMouseDrag={(event) => {
+        if (onResizeDrag?.(event)) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+      }}
+      onMouseUp={() => {
+        onResizeDragEnd?.()
+      }}
     >
-      <SidebarTop />
-      {gitOnTop ? (
-        <>
-          {gitBody}
-          {separator}
-        </>
-      ) : null}
-      <box
-        flexDirection="column"
-        flexGrow={tabsGrow}
-        flexShrink={1}
-        flexBasis={0}
-        overflow="hidden"
-      >
-        <TabsBody onTabActivate={onTabActivate} />
+      <box flexDirection="row" width={sidebarWidth} flexGrow={1} overflow="hidden">
+        <box width={contentWidth} flexGrow={1} flexDirection="column" overflow="hidden">
+          <SidebarTop contentWidth={contentWidth} />
+          <box ref={bodyRef} flexDirection="column" flexGrow={1} overflow="hidden">
+            {gitOnTop ? (
+              <>
+                {gitBody}
+                {embeddedHandle}
+              </>
+            ) : null}
+            <box
+              flexDirection="column"
+              flexGrow={tabsGrow}
+              flexShrink={1}
+              flexBasis={0}
+              overflow="hidden"
+            >
+              <TabsBody onTabActivate={onTabActivate} />
+            </box>
+            {gitOnBottom ? (
+              <>
+                {embeddedHandle}
+                {gitBody}
+              </>
+            ) : null}
+          </box>
+          {!gitEmbedded ? separator : null}
+        </box>
+        <box
+          height="100%"
+          width={1}
+          flexShrink={0}
+          backgroundColor={tokens.border}
+          onMouseDown={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            onSidebarResizeStart?.({ initialWidth: sidebarWidth, screenStart: event.x })
+          }}
+        />
       </box>
-      {gitOnBottom ? (
-        <>
-          {separator}
-          {gitBody}
-        </>
-      ) : null}
     </ContextMenuBox>
   )
 }

package/src/ui/root.tsx

@@ -5,10 +5,14 @@ import type { ModalState, SessionRecord, SnippetRecord } from '../state/types'
 import type { ThemeId } from './themes'
 
 import { useAppStore } from '../state/app-store'
+import { dispatchGlobal } from '../state/dispatch-ref'
+import { getGitPaneWidthFromRatio } from '../state/git-pane-sizing'
 import { getTreeForTab, PANE_BORDER, type SplitDirection } from '../state/layout-tree'
+import { ContextMenuBox } from './components/context-menu-box'
 import { ContextMenuOverlay } from './components/context-menu-overlay'
 import { CreateSessionModal } from './components/create-session-modal'
 import { GitCommitModal } from './components/git-commit-modal'
+import { buildGitPaneContextMenu } from './components/git-pane-context-menu'
 import { GitPaneWidget } from './components/git-pane-widget'
 import { GitView } from './components/git-view'
 import { HelpModal } from './components/help-modal'
@@ -25,7 +29,7 @@ import { StatusBar } from './components/status-bar'
 import { TerminalPane } from './components/terminal-pane'
 import { ThemePickerModal } from './components/theme-picker-modal'
 import { UpdateAvailableModal } from './components/update-available-modal'
-import { useBg } from './theme'
+import { useBg, useTokens } from './theme'
 
 function getCreateSessionFields(modal: ModalState) {
   if (modal.type !== 'create-session') {
@@ -195,6 +199,17 @@ interface RootViewProps {
   onTerminalClick?: (event: MouseEvent, origin: TerminalContentOrigin, tabId?: string) => void
   onPaneActivate?: (tabId: string) => void
   onSplitResize?: (tabId: string, ratio: number, axis: SplitDirection) => void
+  onSidebarResizeStart?: (info: { initialWidth: number; screenStart: number }) => void
+  onGitPaneResizeStart?: (info: {
+    initialWidth: number
+    screenStart: number
+    side: 'left' | 'right'
+  }) => void
+  onEmbeddedGitResizeStart?: (info: {
+    containerStart: number
+    position: 'top' | 'bottom'
+    totalSize: number
+  }) => void
   onSeparatorDragStart?: (info: {
     tabId: string
     direction: SplitDirection
@@ -211,10 +226,13 @@ export function RootView({
   contentOrigin,
   localScrollbackEnabled,
   mouseForwardingEnabled,
+  onEmbeddedGitResizeStart,
+  onGitPaneResizeStart,
   onPaneActivate,
   onSeparatorDrag,
   onSeparatorDragEnd,
   onSeparatorDragStart,
+  onSidebarResizeStart,
   onSplitResize,
   onTerminalClick,
   onTerminalMouseEvent,
@@ -238,7 +256,7 @@ export function RootView({
   const gitPaneMode = useAppStore((s) => s.gitPane.mode)
   const gitPaneVisible = useAppStore((s) => s.gitPane.visible)
   const gitPanePosition = useAppStore((s) => s.gitPane.position)
-  const gitPaneRatio = useAppStore((s) => s.gitPane.ratio)
+  const gitPaneRatio = useAppStore((s) => s.gitPane.paneRatio)
 
   const activeTab = tabs.find((tab) => tab.id === activeTabId)
   const activeTree = activeTabId ? getTreeForTab(layoutTrees, tabGroupMap, activeTabId) : null
@@ -269,12 +287,36 @@ export function RootView({
   }
 
   return (
-    <box flexDirection="column" width="100%" height="100%" backgroundColor={editorBg}>
+    <box
+      flexDirection="column"
+      width="100%"
+      height="100%"
+      backgroundColor={editorBg}
+      onMouseDrag={(event) => {
+        if (onSeparatorDrag?.(event)) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+      }}
+      onMouseUp={() => {
+        onSeparatorDragEnd?.()
+      }}
+    >
       {sessionBarPosition === 'top' && <SessionBar />}
       <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
-        <Sidebar onTabActivate={onPaneActivate} />
+        <Sidebar
+          onTabActivate={onPaneActivate}
+          onEmbeddedGitResizeStart={onEmbeddedGitResizeStart}
+          onResizeDrag={onSeparatorDrag}
+          onResizeDragEnd={onSeparatorDragEnd}
+          onSidebarResizeStart={onSidebarResizeStart}
+        />
         {gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'left' ? (
-          <GitPaneInPaneMode ratio={gitPaneRatio} />
+          <GitPaneInPaneMode
+            position="left"
+            ratio={gitPaneRatio}
+            onGitPaneResizeStart={onGitPaneResizeStart}
+          />
         ) : null}
         {activeTree && activeTree.type === 'split' ? (
           <SplitLayout
@@ -321,7 +363,11 @@ export function RootView({
           />
         )}
         {gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'right' ? (
-          <GitPaneInPaneMode ratio={gitPaneRatio} />
+          <GitPaneInPaneMode
+            position="right"
+            ratio={gitPaneRatio}
+            onGitPaneResizeStart={onGitPaneResizeStart}
+          />
         ) : null}
       </box>
       {sessionBarPosition === 'bottom' && <SessionBar />}
@@ -342,14 +388,58 @@ export function RootView({
   )
 }
 
-function GitPaneInPaneMode({ ratio }: { ratio: number }) {
+function GitPaneInPaneMode({
+  onGitPaneResizeStart,
+  position,
+  ratio,
+}: {
+  ratio: number
+  position: 'left' | 'right'
+  onGitPaneResizeStart?: (info: {
+    initialWidth: number
+    screenStart: number
+    side: 'left' | 'right'
+  }) => void
+}) {
   const bg = useBg('elevated')
-  // Ratio maps to a fixed column count (20..80), mirroring the reservation in
-  // use-terminal-resize so the terminal-content area stays in sync.
-  const width = Math.max(20, Math.min(80, Math.round(ratio * 80)))
+  const tokens = useTokens()
+  const gitPane = useAppStore((s) => s.gitPane)
+  const width = getGitPaneWidthFromRatio(ratio)
+  const contentWidth = Math.max(1, width - 1)
+  const gitPaneMenu = buildGitPaneContextMenu(
+    gitPane,
+    () => dispatchGlobal({ type: 'toggle-git-pane' }),
+    (mode, nextPosition) => {
+      dispatchGlobal({ mode, type: 'set-git-pane-mode' })
+      dispatchGlobal({ position: nextPosition, type: 'set-git-pane-position' })
+    }
+  )
+  const handle = (
+    <box
+      width={1}
+      flexShrink={0}
+      backgroundColor={tokens.border}
+      onMouseDown={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        onGitPaneResizeStart?.({ initialWidth: width, screenStart: event.x, side: position })
+      }}
+    />
+  )
   return (
     <box flexDirection="column" width={width} flexShrink={0} backgroundColor={bg} overflow="hidden">
-      <GitPaneWidget pollingEnabled />
+      <box flexDirection="row" flexGrow={1} overflow="hidden">
+        {position === 'right' ? handle : null}
+        <ContextMenuBox
+          width={contentWidth}
+          flexGrow={1}
+          overflow="hidden"
+          rightClickMenu={gitPaneMenu}
+        >
+          <GitPaneWidget pollingEnabled />
+        </ContextMenuBox>
+        {position === 'left' ? handle : null}
+      </box>
     </box>
   )
 }