@brimveyn/aimux 1.7.3 → 1.8.0

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

@@ -53,27 +53,39 @@ export function reduceSessionState(state: AppState, action: AppAction): AppState
         ),
       }
     case 'delete-session-record': {
+      const deletingCurrent = action.sessionId === state.currentSessionId
       const newSessions = state.sessions.filter((session) => session.id !== action.sessionId)
-      const filteredNew = filterSessions(newSessions, state.modal.editBuffer)
-      const maxIndex = filteredNew.length
-      const clampedIndex = Math.min(state.modal.selectedIndex, maxIndex)
       const nextStatuses = { ...state.sessionStatuses }
       delete nextStatuses[action.sessionId]
+      if (action.openSessionPicker) {
+        const filteredNew = filterSessions(newSessions, state.modal.editBuffer)
+        const maxIndex = filteredNew.length
+        const clampedIndex = Math.min(state.modal.selectedIndex, maxIndex)
+        return {
+          ...state,
+          activeTabId: deletingCurrent ? null : state.activeTabId,
+          currentSessionId: deletingCurrent ? null : state.currentSessionId,
+          focusMode: 'modal',
+          modal: {
+            editBuffer: null,
+            selectedIndex: clampedIndex,
+            sessionTargetId: null,
+            type: 'session-picker',
+          },
+          sessions: newSessions,
+          sessionStatuses: nextStatuses,
+          tabs: deletingCurrent ? [] : state.tabs,
+        }
+      }
       return {
         ...state,
-        activeTabId: action.sessionId === state.currentSessionId ? null : state.activeTabId,
-        currentSessionId:
-          action.sessionId === state.currentSessionId ? null : state.currentSessionId,
-        focusMode: 'modal',
-        modal: {
-          editBuffer: null,
-          selectedIndex: clampedIndex,
-          sessionTargetId: null,
-          type: 'session-picker',
-        },
+        activeTabId: deletingCurrent ? null : state.activeTabId,
+        currentSessionId: deletingCurrent ? null : state.currentSessionId,
+        focusMode: deletingCurrent ? 'navigation' : state.focusMode,
+        modal: deletingCurrent ? CLOSED_MODAL : state.modal,
         sessions: newSessions,
         sessionStatuses: nextStatuses,
-        tabs: action.sessionId === state.currentSessionId ? [] : state.tabs,
+        tabs: deletingCurrent ? [] : state.tabs,
       }
     }
     case 'reorder-sessions': {

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/session-persistence.ts

@@ -2,6 +2,7 @@ import { allLeafIds, createGroupId, type LayoutNode, pruneLayoutTree } from './l
 import {
   type AppState,
   DEFAULT_SCROLL_INTENT,
+  type ScrollIntent,
   type TabSession,
   type TabStatus,
   type WorkspaceSnapshotV1,
@@ -82,6 +83,18 @@ export function restoreTabsFromWorkspace(snapshot: WorkspaceSnapshotV1 | undefin
     }))
 }
 
+export function getSnapshotScrollIntents(
+  snapshot: WorkspaceSnapshotV1 | undefined
+): Map<string, ScrollIntent> {
+  if (!snapshot || snapshot.version !== 1) {
+    return new Map()
+  }
+
+  return new Map(
+    snapshot.tabs.map((tab) => [tab.id, tab.scrollIntent ?? DEFAULT_SCROLL_INTENT] as const)
+  )
+}
+
 export function restoreLayoutTrees(
   snapshot: WorkspaceSnapshotV1 | undefined,
   tabs: TabSession[]
@@ -192,11 +205,7 @@ export function restoreWorkspaceState(
     activeTabId,
     focusMode: 'navigation',
     layoutTrees,
-    sidebar: {
-      ...state.sidebar,
-      visible: workspaceSnapshot?.sidebar.visible ?? state.sidebar.visible,
-      width: workspaceSnapshot?.sidebar.width ?? state.sidebar.width,
-    },
+    sidebar: state.sidebar,
     tabGroupMap,
     tabs: orderedTabs,
   }

package/src/state/store.ts

@@ -1,15 +1,4 @@
-import type {
-  AppAction,
-  AppState,
-  GitModeState,
-  GitPaneMode,
-  GitPanePosition,
-  GitPaneState,
-  SessionBarPosition,
-  SessionRecord,
-  SnippetRecord,
-} from './types'
-
+import { reduceAutoCommit } from './reducers/auto-commit-state'
 import { emptyGitMode, reduceGitModeState } from './reducers/git-mode-state'
 import { emptyGitPanel, reduceGitPanelState } from './reducers/git-panel-state'
 import { emptyModal, reduceModalState } from './reducers/modal-state'
@@ -17,6 +6,18 @@ import { reduceSessionState } from './reducers/session-state'
 import { reduceTabState } from './reducers/tab-state'
 import { reduceUIState } from './reducers/ui-state'
 import { filterSnippets } from './selectors'
+import {
+  type AppAction,
+  type AppState,
+  EMPTY_AUTO_COMMIT_STATE,
+  type GitModeState,
+  type GitPaneMode,
+  type GitPanePosition,
+  type GitPaneState,
+  type SessionBarPosition,
+  type SessionRecord,
+  type SnippetRecord,
+} from './types'
 
 const DEFAULT_SIDEBAR_WIDTH = 28
 const DEFAULT_SIDEBAR_MIN_WIDTH = 18
@@ -27,6 +28,7 @@ const DEFAULT_TERMINAL_ROWS = 24
 export interface InitialStateOverrides {
   gitMode?: Partial<GitModeState>
   gitPane?: Partial<GitPaneState>
+  sidebar?: Pick<AppState['sidebar'], 'visible' | 'width'>
   sessionBarVisible?: boolean
   sessionBarPosition?: SessionBarPosition
 }
@@ -34,12 +36,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,
 }
@@ -51,6 +54,10 @@ function resolveGitPanePosition(mode: GitPaneMode, position: GitPanePosition): G
   return position === 'left' || position === 'right' ? position : 'left'
 }
 
+function clampSidebarWidth(width: number): number {
+  return Math.min(DEFAULT_SIDEBAR_MAX_WIDTH, Math.max(DEFAULT_SIDEBAR_MIN_WIDTH, width))
+}
+
 export function createInitialState(
   customCommands: Record<string, string> = {},
   sessions: SessionRecord[] = [],
@@ -65,6 +72,7 @@ export function createInitialState(
   )
   return {
     activeTabId: null,
+    autoCommit: EMPTY_AUTO_COMMIT_STATE,
     currentSessionId: null,
     customCommands,
     focusMode: showSessionPicker ? 'command-edit' : 'navigation',
@@ -100,8 +108,8 @@ export function createInitialState(
     sidebar: {
       maxWidth: DEFAULT_SIDEBAR_MAX_WIDTH,
       minWidth: DEFAULT_SIDEBAR_MIN_WIDTH,
-      visible: true,
-      width: DEFAULT_SIDEBAR_WIDTH,
+      visible: overrides.sidebar?.visible ?? true,
+      width: clampSidebarWidth(overrides.sidebar?.width ?? DEFAULT_SIDEBAR_WIDTH),
     },
     snippets,
     tabGroupMap: {},
@@ -128,6 +136,9 @@ export function appReducer(state: AppState, action: AppAction): AppState {
   const gitModeState = reduceGitModeState(state, action)
   if (gitModeState) return gitModeState
 
+  const autoCommitState = reduceAutoCommit(state, action)
+  if (autoCommitState) return autoCommitState
+
   switch (action.type) {
     case 'set-snippets':
       return { ...state, snippets: action.snippets }

package/src/state/types.ts

@@ -62,6 +62,7 @@ export interface TerminalLine {
 
 export interface TerminalSnapshot {
   lines: TerminalLine[]
+  tailLines?: TerminalLine[]
   viewportY: number
   baseY: number
   cursorVisible: boolean
@@ -166,7 +167,8 @@ export interface GitPaneState {
   visible: boolean
   mode: GitPaneMode
   position: GitPanePosition
-  ratio: number
+  paneRatio: number
+  embeddedRatio: number
   diffModeRatio: number
   fileListMode: GitFileListMode
   treeCompaction: boolean
@@ -322,6 +324,7 @@ export interface ModalGitCommit extends ModalBase {
   type: 'git-commit'
   activeField: 'title' | 'body'
   contentBuffer: string
+  stage: 'edit' | 'generating' | 'confirm'
 }
 
 export interface ModalCreateSession extends ModalBase {
@@ -396,6 +399,7 @@ export interface AppState {
   customCommands: Record<AssistantId, string>
   gitPanel: GitPanelState
   gitMode: GitModeState
+  autoCommit: AutoCommitState
   /** Chord prefix the sequence resolver is currently waiting on, or null when idle. */
   pendingChords: string[] | null
 }
@@ -437,7 +441,7 @@ export type SessionAction =
   | { type: 'set-sessions'; sessions: SessionRecord[] }
   | { type: 'create-session-record'; session: SessionRecord }
   | { type: 'rename-session-record'; sessionId: string; name: string }
-  | { type: 'delete-session-record'; sessionId: string }
+  | { type: 'delete-session-record'; sessionId: string; openSessionPicker?: boolean }
   | { type: 'reorder-sessions'; orderedIds: string[] }
   | { type: 'set-session-status'; sessionId: string; status: SessionStatus }
 
@@ -500,10 +504,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 }
@@ -524,6 +530,50 @@ export type GitPanelAction =
   | { type: 'git-refresh-error'; kind: GitPanelError }
   | { type: 'git-panel-reset' }
 
+// -- Auto-commit state & actions --
+export type AutoCommitSuggestion =
+  | { kind: 'idle' }
+  | {
+      kind: 'generating'
+      tabId: string
+      workingTreeHash: string
+      abortController: AbortController
+      startedAt: number
+    }
+  | {
+      kind: 'ready'
+      tabId: string
+      workingTreeHash: string
+      title: string
+      body: string
+      generatedAt: number
+    }
+
+export interface AutoCommitState {
+  bySession: Record<string, AutoCommitSuggestion>
+}
+
+export const EMPTY_AUTO_COMMIT_STATE: AutoCommitState = { bySession: {} }
+
+export type AutoCommitAction =
+  | {
+      type: 'auto-commit-generation-started'
+      sessionId: string
+      tabId: string
+      workingTreeHash: string
+      abortController: AbortController
+      startedAt: number
+    }
+  | {
+      type: 'auto-commit-generation-ready'
+      sessionId: string
+      workingTreeHash: string
+      title: string
+      body: string
+      generatedAt: number
+    }
+  | { type: 'auto-commit-clear'; sessionId: string }
+
 export type GitModeAction =
   | { type: 'enter-git-mode' }
   | { type: 'exit-git-mode' }
@@ -573,7 +623,12 @@ export type GitModeAction =
       fromSection: GitFileSection
       toSection: GitFileSection | null
     }
-  | { type: 'open-git-commit-modal' }
+  | { type: 'open-git-commit-modal'; sessionId?: string }
+  | { type: 'git-commit-enter-confirm' }
+  | { type: 'git-commit-leave-confirm' }
+  | { type: 'git-commit-enter-generating'; sessionId: string }
+  | { type: 'git-commit-leave-generating' }
+  | { type: 'git-commit-use-background-suggestion'; sessionId: string }
 
 // -- Data actions --
 export type DataAction =
@@ -590,3 +645,4 @@ export type AppAction =
   | DataAction
   | GitPanelAction
   | GitModeAction
+  | AutoCommitAction

package/src/state/workspace-save.ts

@@ -26,14 +26,19 @@ 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,
     sessionBarVisible: state.sessionBar.visible,
+    sidebar: {
+      visible: state.sidebar.visible,
+      width: state.sidebar.width,
+    },
   })
   saveSessionCatalog(
     buildSessionsWithCurrentSnapshot(state.sessions, state.currentSessionId, state)

package/src/ui/ai-usage/controller.ts

@@ -0,0 +1,35 @@
+export interface AIUsagePopoverState {
+  anchorX: number
+  anchorY: number
+}
+
+type Listener = (state: AIUsagePopoverState | null) => void
+
+let current: AIUsagePopoverState | null = null
+const listeners = new Set<Listener>()
+
+export function openAIUsagePopover(anchorX: number, anchorY: number): void {
+  current = { anchorX, anchorY }
+  for (const l of listeners) l(current)
+}
+
+export function closeAIUsagePopover(): void {
+  if (current === null) return
+  current = null
+  for (const l of listeners) l(null)
+}
+
+export function toggleAIUsagePopover(anchorX: number, anchorY: number): void {
+  if (current) {
+    closeAIUsagePopover()
+  } else {
+    openAIUsagePopover(anchorX, anchorY)
+  }
+}
+
+export function subscribeAIUsagePopover(listener: Listener): () => void {
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}

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

@@ -0,0 +1,131 @@
+import type { AIUsageTool } from '@brimveyn/aimux-config'
+
+import { useAIUsageStore } from '../../state/ai-usage-store'
+import { toggleAIUsagePopover } from '../ai-usage/controller'
+import { useTokens } from '../theme'
+
+const TOOL_ICON: Record<AIUsageTool, string> = {
+  claude: 'CC',
+  codex: 'CO',
+}
+
+const BAR_SEGMENTS = 4
+const BAR_FILLED_CHAR = '\u{2501}'
+const BAR_EMPTY_CHAR = '\u{2500}'
+
+function formatTokens(total: number): string {
+  if (total >= 1_000_000) return `${(total / 1_000_000).toFixed(1)}M`
+  if (total >= 1_000) return `${(total / 1_000).toFixed(1)}k`
+  return String(total)
+}
+
+function buildBar(percent: number): { filled: string; empty: string } {
+  let filledCount = 0
+  for (let i = 0; i < BAR_SEGMENTS; i++) {
+    if (percent > i * (100 / BAR_SEGMENTS)) filledCount++
+  }
+  return {
+    empty: BAR_EMPTY_CHAR.repeat(BAR_SEGMENTS - filledCount),
+    filled: BAR_FILLED_CHAR.repeat(filledCount),
+  }
+}
+
+function formatResetIn(snap: {
+  resetAt: string | null
+  timeRemaining: string | null
+}): string | null {
+  if (snap.resetAt) {
+    const diffMs = new Date(snap.resetAt).getTime() - Date.now()
+    if (diffMs > 0) {
+      const totalMin = Math.round(diffMs / 60_000)
+      const h = Math.floor(totalMin / 60)
+      const m = totalMin % 60
+      return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}h`
+    }
+  }
+  return snap.timeRemaining
+}
+
+export function AIUsageIndicator() {
+  const t = useTokens()
+  const enabled = useAIUsageStore((s) => s.enabled)
+  const snapshots = useAIUsageStore((s) => s.snapshots)
+
+  if (!enabled) return null
+
+  const ordered: AIUsageTool[] = ['claude', 'codex']
+  const entries = ordered
+    .map((tool) => ({ snap: snapshots[tool], tool }))
+    .filter((entry) => entry.snap !== undefined)
+
+  if (entries.length === 0) {
+    return (
+      <box flexDirection="row" gap={1}>
+        <text fg={t.muted}>…</text>
+      </box>
+    )
+  }
+
+  return (
+    <box
+      flexDirection="row"
+      gap={2}
+      onMouseDown={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (e.button !== 0) return
+        toggleAIUsagePopover(e.x, e.y)
+      }}
+    >
+      {entries.map(({ snap, tool }) => {
+        if (!snap) return null
+        const icon = TOOL_ICON[tool]
+        if (snap.error) {
+          return (
+            <text key={tool} fg={t.palette.error} selectable={false}>
+              {icon} —
+            </text>
+          )
+        }
+        if (snap.percent !== null) {
+          const p = Math.round(snap.percent)
+          let color = t.palette.success
+          if (p >= 85) {
+            color = t.palette.error
+          } else if (p >= 60) {
+            color = t.palette.warning
+          }
+          const { empty, filled } = buildBar(snap.percent)
+          const reset = formatResetIn(snap)
+          const pctText = `${String(p).padStart(2, ' ')}%`
+          return (
+            <box key={tool} flexDirection="row">
+              <text fg={color} selectable={false}>
+                {icon}{' '}
+              </text>
+              <text fg={color} selectable={false}>
+                {filled}
+              </text>
+              <text fg={t.muted} selectable={false}>
+                {empty}
+              </text>
+              <text fg={t.palette.ink} selectable={false}>
+                {` ${pctText}`}
+              </text>
+              {reset ? (
+                <text fg={t.muted} selectable={false}>
+                  {` · ${reset}`}
+                </text>
+              ) : null}
+            </box>
+          )
+        }
+        return (
+          <text key={tool} fg={t.muted} selectable={false}>
+            {icon} {formatTokens(snap.tokens.total)}
+          </text>
+        )
+      })}
+    </box>
+  )
+}

package/src/ui/components/ai-usage-popover.tsx

@@ -0,0 +1,152 @@
+import type { AIUsageTool } from '@brimveyn/aimux-config'
+
+import { useKeyboard } from '@opentui/react'
+import { useEffect, useState } from 'react'
+
+import type { UsageSnapshot } from '../../services/ai-usage/types'
+
+import { useAIUsageStore } from '../../state/ai-usage-store'
+import { useAppStore } from '../../state/app-store'
+import {
+  type AIUsagePopoverState,
+  closeAIUsagePopover,
+  subscribeAIUsagePopover,
+} from '../ai-usage/controller'
+import { useTokens } from '../theme'
+
+const TOOL_TITLE: Record<AIUsageTool, string> = {
+  claude: 'Claude Code',
+  codex: 'Codex',
+}
+
+const POPOVER_WIDTH = 38
+
+function fmt(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`
+  return String(n)
+}
+
+function buildLines(snap: UsageSnapshot): string[] {
+  if (snap.error) {
+    return [`error: ${snap.error.slice(0, 30)}`]
+  }
+  const lines: string[] = []
+  if (snap.percent !== null) {
+    lines.push(`usage   ${snap.percent.toFixed(1)}%`)
+  }
+  lines.push(`tokens  in ${fmt(snap.tokens.input)} / out ${fmt(snap.tokens.output)}`)
+  if (snap.tokens.cache > 0) {
+    lines.push(`cache   ${fmt(snap.tokens.cache)}`)
+  }
+  lines.push(`total   ${fmt(snap.tokens.total)}`)
+  if (snap.costUSD !== null) {
+    lines.push(`cost    $${snap.costUSD.toFixed(2)}`)
+  }
+  if (snap.burnRatePerHour !== null) {
+    lines.push(`burn    ${fmt(Math.round(snap.burnRatePerHour))}/h`)
+  }
+  if (snap.timeRemaining) {
+    lines.push(`resets  ${snap.timeRemaining}`)
+  } else if (snap.resetAt) {
+    lines.push(`resets  ${new Date(snap.resetAt).toLocaleTimeString()}`)
+  }
+  return lines
+}
+
+export function AIUsagePopover() {
+  const [popover, setPopover] = useState<AIUsagePopoverState | null>(null)
+  const t = useTokens()
+  const enabled = useAIUsageStore((s) => s.enabled)
+  const snapshots = useAIUsageStore((s) => s.snapshots)
+  const terminalCols = useAppStore((s) => s.layout.terminalCols)
+  const terminalRows = useAppStore((s) => s.layout.terminalRows)
+
+  useEffect(() => subscribeAIUsagePopover(setPopover), [])
+
+  useKeyboard((key) => {
+    if (!popover) return
+    if (key.name === 'escape') {
+      key.preventDefault()
+      closeAIUsagePopover()
+    }
+  })
+
+  if (!enabled || !popover) return null
+
+  const tools: AIUsageTool[] = ['claude', 'codex']
+  const sections = tools
+    .map((tool) => ({ snap: snapshots[tool], tool }))
+    .filter((s) => s.snap !== undefined)
+
+  let bodyLines = 0
+  if (sections.length === 0) {
+    bodyLines = 1
+  } else {
+    for (const s of sections) {
+      if (!s.snap) continue
+      bodyLines += buildLines(s.snap).length + 2
+    }
+  }
+  const height = Math.min(terminalRows - 2, bodyLines + 2)
+  const width = Math.min(terminalCols - 2, POPOVER_WIDTH)
+
+  const left = Math.max(0, Math.min(popover.anchorX - width + 2, terminalCols - width))
+  const top = Math.max(0, popover.anchorY - height)
+
+  return (
+    <box position="absolute" top={0} left={0} width="100%" height="100%">
+      <box
+        position="absolute"
+        top={0}
+        left={0}
+        width="100%"
+        height="100%"
+        onMouseDown={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          closeAIUsagePopover()
+        }}
+      />
+      <box
+        position="absolute"
+        top={top}
+        left={left}
+        width={width}
+        flexDirection="column"
+        border
+        borderColor={t.palette.primary}
+        backgroundColor={t.elevated}
+        onMouseDown={(e) => {
+          e.stopPropagation()
+        }}
+      >
+        {sections.length === 0 ? (
+          <box paddingLeft={1} paddingRight={1}>
+            <text fg={t.muted} selectable={false}>
+              no data yet — collecting…
+            </text>
+          </box>
+        ) : (
+          sections.map(({ snap, tool }, idx) => {
+            if (!snap) return null
+            const lines = buildLines(snap)
+            return (
+              <box key={tool} flexDirection="column" paddingLeft={1} paddingRight={1}>
+                {idx > 0 ? <text fg={t.muted}> </text> : null}
+                <text fg={t.accent} selectable={false}>
+                  {TOOL_TITLE[tool]}
+                </text>
+                {lines.map((line, i) => (
+                  <text key={`${tool}-${i}`} fg={t.palette.ink} selectable={false}>
+                    {line}
+                  </text>
+                ))}
+              </box>
+            )
+          })
+        )}
+      </box>
+    </box>
+  )
+}

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%">