@brimveyn/aimux 1.4.1 → 1.5.4

package/src/ui/components/sidebar.tsx

@@ -2,12 +2,9 @@ import type { ScrollBoxRenderable } from '@opentui/core'
 
 import { memo, useMemo, useRef } from 'react'
 
-import type { GitPanelState } from '../../state/types'
-
-import { useGitPanelPolling } from '../../git/git-poller'
 import { useAppStore } from '../../state/app-store'
 import { theme } from '../theme'
-import { GitPanel } from './git-panel'
+import { GitPaneWidget } from './git-pane-widget'
 import { buildTabGroupInfo } from './sidebar-group-metadata'
 import { TabItem } from './tab-item'
 import { useSidebarAutoScroll } from './use-sidebar-auto-scroll'
@@ -143,50 +140,29 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
   )
 })
 
-const GitBody = memo(function GitBody() {
-  const gitPanel = useAppStore((s) => s.gitPanel)
-  const currentSessionId = useAppStore((s) => s.currentSessionId)
-  const sessions = useAppStore((s) => s.sessions)
-  const sidebarVisible = useAppStore((s) => s.sidebar.visible)
-  const gitPanelVisible = useAppStore((s) => s.sidebar.gitPanelVisible)
-  const currentSession = currentSessionId
-    ? sessions.find((s) => s.id === currentSessionId)
-    : undefined
-  const projectPath = currentSession?.projectPath
-
-  useGitPanelPolling({
-    enabled: sidebarVisible && gitPanelVisible,
-    projectPath,
-  })
-
-  const lastGoodRef = useRef<GitPanelState | null>(null)
-  const prevProjectPathRef = useRef(projectPath)
-  if (prevProjectPathRef.current !== projectPath) {
-    prevProjectPathRef.current = projectPath
-    lastGoodRef.current = null
-  }
-  const isGood = gitPanel.error === null && gitPanel.branch !== null
-  if (isGood) {
-    lastGoodRef.current = gitPanel
-  }
-  const display = lastGoodRef.current ?? gitPanel
-
-  return <GitPanel gitPanel={display} projectPath={projectPath} />
-})
-
 export function Sidebar({ onTabActivate }: SidebarProps) {
   const sidebarVisible = useAppStore((s) => s.sidebar.visible)
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
-  const gitPanelVisible = useAppStore((s) => s.sidebar.gitPanelVisible)
-  const gitPanelRatio = useAppStore((s) => s.sidebar.gitPanelRatio)
+  const gitPane = useAppStore((s) => s.gitPane)
 
   if (!sidebarVisible) {
     return null
   }
 
+  const gitEmbedded = gitPane.mode === 'embedded' && gitPane.visible
+  const gitOnTop = gitEmbedded && gitPane.position === 'top'
+  const gitOnBottom = gitEmbedded && gitPane.position === 'bottom'
+
   // flex-grow scaled by 100 (integer preferred); tabs gets (1-ratio), git gets ratio.
-  const tabsGrow = Math.max(1, Math.round((1 - gitPanelRatio) * 100))
-  const gitGrow = Math.max(1, Math.round(gitPanelRatio * 100))
+  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 separator = <text fg={theme.dim}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
+  const gitBody = gitEmbedded ? (
+    <box flexDirection="column" flexGrow={gitGrow} flexShrink={1} flexBasis={0} overflow="hidden">
+      <GitPaneWidget pollingEnabled={gitPane.visible} />
+    </box>
+  ) : null
 
   return (
     <box
@@ -197,6 +173,12 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
       gap={0}
     >
       <SidebarTop />
+      {gitOnTop ? (
+        <>
+          {gitBody}
+          {separator}
+        </>
+      ) : null}
       <box
         flexDirection="column"
         flexGrow={tabsGrow}
@@ -206,18 +188,10 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
       >
         <TabsBody onTabActivate={onTabActivate} />
       </box>
-      {gitPanelVisible ? (
+      {gitOnBottom ? (
         <>
-          <text fg={theme.dim}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
-          <box
-            flexDirection="column"
-            flexGrow={gitGrow}
-            flexShrink={1}
-            flexBasis={0}
-            overflow="hidden"
-          >
-            <GitBody />
-          </box>
+          {separator}
+          {gitBody}
         </>
       ) : null}
     </box>

package/src/ui/components/snippet-editor-modal.tsx

@@ -1,4 +1,3 @@
-import { useModalHelp } from '../keymap-context'
 import { theme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
@@ -19,12 +18,11 @@ export function SnippetEditorModal({
 }: SnippetEditorModalProps) {
   const nameActive = activeField === 'name'
   const contentActive = activeField === 'content'
-  const help = useModalHelp('modal.snippet-editor')
 
   return (
     <ModalShell
       title={isEditing ? 'Edit snippet' : 'Create snippet'}
-      help={help}
+      keybindsModeId="modal.snippet-editor"
       width={uiTokens.modalWidth.xl}
     >
       <box flexDirection="column">

package/src/ui/components/snippet-picker-modal.tsx

@@ -1,7 +1,6 @@
 import type { SnippetRecord } from '../../state/types'
 
 import { filterSnippets } from '../../state/selectors'
-import { useModalHelp } from '../keymap-context'
 import { theme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { ListItem } from './list-item'
@@ -24,12 +23,11 @@ function truncateContent(content: string): string {
 
 export function SnippetPickerModal({ filter, selectedIndex, snippets }: SnippetPickerModalProps) {
   const filtered = filterSnippets(snippets, filter)
-  const help = useModalHelp('modal.snippet-picker')
 
   return (
     <ModalShell
       title="Snippets"
-      help={help}
+      keybindsModeId="modal.snippet-picker"
       width={uiTokens.modalWidth.xl}
       footer={<ModalFilterBar filter={filter} />}
     >

package/src/ui/components/status-bar.tsx

@@ -10,8 +10,6 @@ function getModeColor(focusMode: AppState['focusMode']): string {
   switch (focusMode) {
     case 'terminal-input':
       return theme.accent
-    case 'layout':
-      return theme.warning
     case 'modal':
       return theme.warning
     case 'command-edit':
@@ -28,8 +26,6 @@ function getModeLabel(focusMode: AppState['focusMode']): string {
   switch (focusMode) {
     case 'terminal-input':
       return 'input'
-    case 'layout':
-      return 'layout'
     case 'modal':
       return 'modal'
     case 'command-edit':

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

@@ -1,4 +1,3 @@
-import { useModalHelp } from '../keymap-context'
 import { theme } from '../theme'
 import { THEME_IDS, type ThemeId, THEMES } from '../themes'
 import { uiTokens } from '../ui-tokens'
@@ -11,9 +10,13 @@ interface ThemePickerModalProps {
 }
 
 export function ThemePickerModal({ currentThemeId, selectedIndex }: ThemePickerModalProps) {
-  const help = useModalHelp('modal.theme-picker')
   return (
-    <ModalShell title="Select theme" help={help} width={uiTokens.modalWidth.md} listGap={0}>
+    <ModalShell
+      title="Select theme"
+      keybindsModeId="modal.theme-picker"
+      width={uiTokens.modalWidth.md}
+      listGap={0}
+    >
       {THEME_IDS.map((id, index) => {
         const entry = THEMES[id]
         const active = index === selectedIndex

package/src/ui/components/update-available-modal.tsx

@@ -1,4 +1,3 @@
-import { useModalHelp } from '../keymap-context'
 import { theme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { ListItem } from './list-item'
@@ -20,10 +19,14 @@ export function UpdateAvailableModal({
   latestVersion,
   selectedIndex,
 }: UpdateAvailableModalProps) {
-  const modalHelp = useModalHelp('modal.update-available')
-  const help = `${currentVersion} → ${latestVersion}  ${modalHelp}`
   return (
-    <ModalShell title="Update available" help={help} width={uiTokens.modalWidth.md} listGap={1}>
+    <ModalShell
+      title="Update available"
+      subtitle={`${currentVersion} → ${latestVersion}`}
+      keybindsModeId="modal.update-available"
+      width={uiTokens.modalWidth.md}
+      listGap={1}
+    >
       <box flexDirection="row" gap={1} marginTop={1}>
         {OPTIONS.map((option, index) => {
           const active = index === selectedIndex

package/src/ui/keymap-context.ts

@@ -3,7 +3,7 @@ import {
   type ModeId,
   type ResolvedKeymapConfig,
 } from '@brimveyn/aimux-config'
-import { createContext, useContext, useMemo } from 'react'
+import { createContext, useContext } from 'react'
 
 import { describeBindings } from '../input/keymap/describe-bindings'
 
@@ -32,8 +32,3 @@ export function buildHintText(
   const trimmed = bindings.slice(0, limit)
   return trimmed.map((b) => `${b.keysDisplay} ${b.description ?? ''}`.trim()).join(HELP_JOINER)
 }
-
-export function useModalHelp(modeId: ModeId, limit?: number): string {
-  const config = useKeymap()
-  return useMemo(() => buildHintText(config, modeId, limit), [config, modeId, limit])
-}

package/src/ui/root.tsx

@@ -8,6 +8,7 @@ import { useAppStore } from '../state/app-store'
 import { getTreeForTab, PANE_BORDER, type SplitDirection } from '../state/layout-tree'
 import { CreateSessionModal } from './components/create-session-modal'
 import { GitCommitModal } from './components/git-commit-modal'
+import { GitPaneWidget } from './components/git-pane-widget'
 import { GitView } from './components/git-view'
 import { HelpModal } from './components/help-modal'
 import { NewTabModal } from './components/new-tab-modal'
@@ -144,7 +145,7 @@ function renderModal(
         />
       )
     case 'help':
-      return <HelpModal />
+      return <HelpModal filter={modal.editBuffer} selectedIndex={modal.selectedIndex} />
     case 'git-commit': {
       const titleText =
         modal.activeField === 'title' ? (modal.editBuffer ?? '') : modal.contentBuffer
@@ -215,6 +216,10 @@ export function RootView({
   const sessions = useAppStore((s) => s.sessions)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessionBarPosition = useAppStore((s) => s.sessionBar.position)
+  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 activeTab = tabs.find((tab) => tab.id === activeTabId)
   const activeTree = activeTabId ? getTreeForTab(layoutTrees, tabGroupMap, activeTabId) : null
@@ -248,6 +253,9 @@ export function RootView({
       {sessionBarPosition === 'top' && <SessionBar />}
       <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
         <Sidebar onTabActivate={onPaneActivate} />
+        {gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'left' ? (
+          <GitPaneInPaneMode ratio={gitPaneRatio} />
+        ) : null}
         {activeTree && activeTree.type === 'split' ? (
           <SplitLayout
             node={activeTree}
@@ -292,6 +300,9 @@ export function RootView({
             onPaneActivate={onPaneActivate}
           />
         )}
+        {gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'right' ? (
+          <GitPaneInPaneMode ratio={gitPaneRatio} />
+        ) : null}
       </box>
       {sessionBarPosition === 'bottom' && <SessionBar />}
       <StatusBar />
@@ -309,3 +320,20 @@ export function RootView({
     </box>
   )
 }
+
+function GitPaneInPaneMode({ ratio }: { ratio: number }) {
+  // 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)))
+  return (
+    <box
+      flexDirection="column"
+      width={width}
+      flexShrink={0}
+      backgroundColor={theme.panel}
+      overflow="hidden"
+    >
+      <GitPaneWidget pollingEnabled />
+    </box>
+  )
+}

package/src/ui/status-bar-model.ts

@@ -62,11 +62,6 @@ export function getStatusBarModel(
         right: modalMode ? hintForMode(config, modalMode) : '',
       }
     }
-    case 'layout':
-      return {
-        left: `${getActiveTabLabel(activeTab)}  ${sessionIcon}  ${sessionLabel}`,
-        right: hintForMode(config, 'layout'),
-      }
     case 'git':
       return {
         left: `${sessionIcon}  ${sessionLabel}`,

package/src/ui/directory-search.ts

@@ -1 +0,0 @@
-export { searchProjectDirectories as searchDirectories } from '../platform/project-search'