@brimveyn/aimux 1.1.0 → 1.2.5

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

@@ -10,6 +10,7 @@ const THEME_COUNT = THEME_IDS.length
 
 function emptyModal() {
   return {
+    cursorPos: 0,
     editBuffer: null,
     selectedIndex: 0,
     sessionTargetId: null,
@@ -19,25 +20,42 @@ function emptyModal() {
 
 export { emptyModal }
 
+function clampCursor(value: number, max: number): number {
+  return Math.max(0, Math.min(max, value))
+}
+
 export function reduceModalState(state: AppState, action: AppAction): AppState | null {
   switch (action.type) {
     case 'open-new-tab-modal':
       return {
         ...state,
         focusMode: 'modal',
-        modal: { editBuffer: null, selectedIndex: 0, sessionTargetId: null, type: 'new-tab' },
+        modal: {
+          cursorPos: 0,
+          editBuffer: null,
+          selectedIndex: 0,
+          sessionTargetId: null,
+          type: 'new-tab',
+        },
       }
     case 'open-help-modal':
       return {
         ...state,
         focusMode: 'modal',
-        modal: { editBuffer: null, selectedIndex: 0, sessionTargetId: null, type: 'help' },
+        modal: {
+          cursorPos: 0,
+          editBuffer: null,
+          selectedIndex: 0,
+          sessionTargetId: null,
+          type: 'help',
+        },
       }
     case 'open-split-picker':
       return {
         ...state,
         focusMode: 'modal',
         modal: {
+          cursorPos: 0,
           editBuffer: null,
           selectedIndex: 0,
           sessionTargetId: null,
@@ -50,29 +68,34 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
         ...state,
         focusMode: 'modal',
         modal: {
+          cursorPos: 0,
           editBuffer: null,
           selectedIndex: 0,
           sessionTargetId: null,
           type: 'session-picker',
         },
       }
-    case 'open-session-name-modal':
+    case 'open-session-name-modal': {
+      const initialName = action.initialName ?? ''
       return {
         ...state,
         focusMode: 'command-edit',
         modal: {
-          editBuffer: action.initialName ?? '',
+          cursorPos: initialName.length,
+          editBuffer: initialName,
           selectedIndex: 0,
           sessionTargetId: action.sessionTargetId ?? null,
           type: 'session-name',
         },
       }
+    }
     case 'open-create-session-modal':
       return {
         ...state,
         focusMode: 'command-edit',
         modal: {
           activeField: 'directory',
+          cursorPos: 0,
           directoryResults: [],
           editBuffer: '',
           nameBuffer: '',
@@ -100,6 +123,7 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
         ...state,
         focusMode: 'modal',
         modal: {
+          cursorPos: 0,
           editBuffer: null,
           selectedIndex: 0,
           sessionTargetId: null,
@@ -110,13 +134,15 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
       const snippet = action.snippetId
         ? state.snippets.find((s) => s.id === action.snippetId)
         : undefined
+      const initialName = snippet?.name ?? ''
       return {
         ...state,
         focusMode: 'command-edit',
         modal: {
           activeField: 'name',
           contentBuffer: snippet?.content ?? '',
-          editBuffer: snippet?.name ?? '',
+          cursorPos: initialName.length,
+          editBuffer: initialName,
           selectedIndex: 0,
           sessionTargetId: snippet?.id ?? null,
           type: 'snippet-editor',
@@ -127,20 +153,44 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
       return {
         ...state,
         focusMode: 'modal',
-        modal: { editBuffer: null, selectedIndex: 0, sessionTargetId: null, type: 'theme-picker' },
+        modal: {
+          cursorPos: 0,
+          editBuffer: null,
+          selectedIndex: 0,
+          sessionTargetId: null,
+          type: 'theme-picker',
+        },
+      }
+    case 'open-git-commit-modal':
+      return {
+        ...state,
+        focusMode: 'command-edit',
+        modal: {
+          activeField: 'title',
+          contentBuffer: '',
+          cursorPos: 0,
+          editBuffer: '',
+          selectedIndex: 0,
+          sessionTargetId: null,
+          type: 'git-commit',
+        },
       }
     case 'begin-snippet-filter': {
       if (state.modal.type !== 'snippet-picker') {
         return state
       }
+      const buf = state.modal.editBuffer ?? ''
       return {
         ...state,
         focusMode: 'command-edit',
-        modal: { ...state.modal, editBuffer: state.modal.editBuffer ?? '' },
+        modal: { ...state.modal, cursorPos: buf.length, editBuffer: buf },
       }
     }
-    case 'close-modal':
-      return { ...state, focusMode: 'navigation', modal: emptyModal() }
+    case 'close-modal': {
+      const nextFocus: AppState['focusMode'] =
+        state.modal.type === 'git-commit' ? 'git' : 'navigation'
+      return { ...state, focusMode: nextFocus, modal: emptyModal() }
+    }
     case 'move-modal-selection': {
       if (
         state.modal.type !== 'new-tab' &&
@@ -180,6 +230,18 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
         },
       }
     }
+    case 'move-modal-cursor': {
+      if (state.modal.editBuffer === null) return state
+      const len = state.modal.editBuffer.length
+      const current = state.modal.cursorPos ?? len
+      let next = current
+      if (action.to === 'home') next = 0
+      else if (action.to === 'end') next = len
+      else if (typeof action.delta === 'number') next = current + action.delta
+      next = clampCursor(next, len)
+      if (next === current) return state
+      return { ...state, modal: { ...state.modal, cursorPos: next } }
+    }
     case 'begin-command-edit': {
       if (state.modal.type !== 'new-tab' && state.modal.type !== 'session-name') {
         return state
@@ -194,22 +256,38 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
       return {
         ...state,
         focusMode: 'command-edit',
-        modal: { ...state.modal, editBuffer: currentCmd },
+        modal: { ...state.modal, cursorPos: currentCmd.length, editBuffer: currentCmd },
       }
     }
     case 'update-command-edit': {
       if (state.modal.editBuffer === null) {
         return state
       }
-      const buf =
-        action.char === '\b'
-          ? state.modal.editBuffer.slice(0, -1)
-          : state.modal.editBuffer + action.char
+      const buffer = state.modal.editBuffer
+      const cursor = clampCursor(state.modal.cursorPos ?? buffer.length, buffer.length)
+      let nextBuffer: string
+      let nextCursor: number
+      if (action.char === '\b') {
+        if (cursor === 0) return state
+        nextBuffer = buffer.slice(0, cursor - 1) + buffer.slice(cursor)
+        nextCursor = cursor - 1
+      } else {
+        nextBuffer = buffer.slice(0, cursor) + action.char + buffer.slice(cursor)
+        nextCursor = cursor + action.char.length
+      }
       const resetIndex =
         state.modal.type === 'session-picker' || state.modal.type === 'snippet-picker'
           ? 0
           : state.modal.selectedIndex
-      return { ...state, modal: { ...state.modal, editBuffer: buf, selectedIndex: resetIndex } }
+      return {
+        ...state,
+        modal: {
+          ...state.modal,
+          cursorPos: nextCursor,
+          editBuffer: nextBuffer,
+          selectedIndex: resetIndex,
+        },
+      }
     }
     case 'commit-command-edit': {
       if (state.modal.editBuffer === null) {
@@ -241,7 +319,11 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
       const option = allOpts[state.modal.selectedIndex]
       const assistantId = option?.id
       if (!assistantId) {
-        return { ...state, focusMode: 'modal', modal: { ...state.modal, editBuffer: null } }
+        return {
+          ...state,
+          focusMode: 'modal',
+          modal: { ...state.modal, cursorPos: 0, editBuffer: null },
+        }
       }
       const trimmed = state.modal.editBuffer.trim()
       const newCustomCommands = { ...state.customCommands }
@@ -254,7 +336,7 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
         ...state,
         customCommands: newCustomCommands,
         focusMode: 'modal',
-        modal: { ...state.modal, editBuffer: null },
+        modal: { ...state.modal, cursorPos: 0, editBuffer: null },
       }
     }
     case 'cancel-command-edit': {
@@ -265,33 +347,55 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
         return {
           ...state,
           focusMode: 'modal',
-          modal: { ...state.modal, editBuffer: null, selectedIndex: 0 },
+          modal: { ...state.modal, cursorPos: 0, editBuffer: null, selectedIndex: 0 },
         }
       }
-      return { ...state, focusMode: 'modal', modal: { ...state.modal, editBuffer: null } }
+      return {
+        ...state,
+        focusMode: 'modal',
+        modal: { ...state.modal, cursorPos: 0, editBuffer: null },
+      }
     }
     case 'switch-create-session-field': {
       if (state.modal.type === 'create-session') {
         const nextField = state.modal.activeField === 'directory' ? 'name' : 'directory'
+        const nextEdit = state.modal.nameBuffer
         return {
           ...state,
           modal: {
             ...state.modal,
             activeField: nextField,
-            editBuffer: state.modal.nameBuffer,
+            cursorPos: nextEdit.length,
+            editBuffer: nextEdit,
             nameBuffer: state.modal.editBuffer ?? '',
           },
         }
       }
       if (state.modal.type === 'snippet-editor') {
         const nextField = state.modal.activeField === 'name' ? 'content' : 'name'
+        const nextEdit = state.modal.contentBuffer
+        return {
+          ...state,
+          modal: {
+            ...state.modal,
+            activeField: nextField,
+            contentBuffer: state.modal.editBuffer ?? '',
+            cursorPos: nextEdit.length,
+            editBuffer: nextEdit,
+          },
+        }
+      }
+      if (state.modal.type === 'git-commit') {
+        const nextField = state.modal.activeField === 'title' ? 'body' : 'title'
+        const nextEdit = state.modal.contentBuffer
         return {
           ...state,
           modal: {
             ...state.modal,
             activeField: nextField,
             contentBuffer: state.modal.editBuffer ?? '',
-            editBuffer: state.modal.contentBuffer,
+            cursorPos: nextEdit.length,
+            editBuffer: nextEdit,
           },
         }
       }
@@ -315,6 +419,7 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
         modal: {
           ...state.modal,
           activeField: 'name',
+          cursorPos: autoName.length,
           editBuffer: autoName,
           nameBuffer:
             state.modal.activeField === 'directory'
@@ -328,10 +433,11 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
       if (state.modal.type !== 'session-picker') {
         return state
       }
+      const buf = state.modal.editBuffer ?? ''
       return {
         ...state,
         focusMode: 'command-edit',
-        modal: { ...state.modal, editBuffer: state.modal.editBuffer ?? '' },
+        modal: { ...state.modal, cursorPos: buf.length, editBuffer: buf },
       }
     }
     case 'open-rename-tab-modal': {
@@ -345,6 +451,7 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
         ...state,
         focusMode: 'command-edit',
         modal: {
+          cursorPos: activeTab.title.length,
           editBuffer: activeTab.title,
           selectedIndex: 0,
           sessionTargetId: activeTab.id,

package/src/state/store.ts

@@ -1,5 +1,6 @@
 import type { AppAction, AppState, SessionRecord, SnippetRecord } from './types'
 
+import { emptyGitMode, reduceGitModeState } from './reducers/git-mode-state'
 import { emptyGitPanel, reduceGitPanelState } from './reducers/git-panel-state'
 import { emptyModal, reduceModalState } from './reducers/modal-state'
 import { reduceSessionState } from './reducers/session-state'
@@ -30,6 +31,7 @@ export function createInitialState(
     currentSessionId: null,
     customCommands,
     focusMode: showSessionPicker ? 'modal' : 'navigation',
+    gitMode: emptyGitMode(),
     gitPanel: emptyGitPanel(),
     layout: {
       terminalCols: DEFAULT_TERMINAL_COLS,
@@ -71,6 +73,9 @@ export function appReducer(state: AppState, action: AppAction): AppState {
   const gitPanelState = reduceGitPanelState(state, action)
   if (gitPanelState) return gitPanelState
 
+  const gitModeState = reduceGitModeState(state, action)
+  if (gitModeState) return gitModeState
+
   switch (action.type) {
     case 'set-snippets':
       return { ...state, snippets: action.snippets }

package/src/state/types.ts

@@ -6,7 +6,13 @@ export type TabStatus = 'starting' | 'running' | 'disconnected' | 'exited' | 'er
 
 export type TabActivity = 'busy' | 'idle'
 
-export type FocusMode = 'navigation' | 'terminal-input' | 'modal' | 'command-edit' | 'layout'
+export type FocusMode =
+  | 'navigation'
+  | 'terminal-input'
+  | 'modal'
+  | 'command-edit'
+  | 'layout'
+  | 'git'
 
 export type ModalType =
   | 'new-tab'
@@ -19,6 +25,7 @@ export type ModalType =
   | 'theme-picker'
   | 'help'
   | 'split-picker'
+  | 'git-commit'
   | null
 
 export interface TerminalSpan {
@@ -135,10 +142,31 @@ export interface GitPanelState {
   error: GitPanelError | null
 }
 
+export type DiffFileStatus = 'modified' | 'new' | 'deleted' | 'binary' | 'renamed'
+
+export interface DiffData {
+  path: string
+  status: DiffFileStatus
+  oldPath?: string
+  rawDiff: string
+  binarySizeBefore?: number
+  binarySizeAfter?: number
+  errorMessage?: string
+}
+
+export interface GitModeState {
+  selectedFileIndex: number
+  diffs: Record<string, DiffData>
+  loading: Record<string, boolean>
+  pendingDeletePath: string | null
+  actionMessage: string | null
+}
+
 interface ModalBase {
   selectedIndex: number
   editBuffer: string | null
   sessionTargetId: string | null
+  cursorPos?: number
 }
 
 export interface ModalClosed extends ModalBase {
@@ -180,6 +208,12 @@ export interface ModalSplitPicker extends ModalBase {
   splitDirection: import('./layout-tree').SplitDirection
 }
 
+export interface ModalGitCommit extends ModalBase {
+  type: 'git-commit'
+  activeField: 'title' | 'body'
+  contentBuffer: string
+}
+
 export interface ModalCreateSession extends ModalBase {
   type: 'create-session'
   directoryResults: DirectoryResult[]
@@ -213,6 +247,7 @@ export type ModalState =
   | ModalSplitPicker
   | ModalCreateSession
   | ModalSnippetEditor
+  | ModalGitCommit
 
 export interface LayoutState {
   terminalCols: number
@@ -239,12 +274,14 @@ export interface AppState {
   layout: LayoutState
   customCommands: Record<AssistantId, string>
   gitPanel: GitPanelState
+  gitMode: GitModeState
   /** Chord prefix the sequence resolver is currently waiting on, or null when idle. */
   pendingChords: string[] | null
 }
 
 // -- Modal actions --
 export type ModalAction =
+  | { type: 'move-modal-cursor'; delta?: number; to?: 'home' | 'end' }
   | { type: 'open-new-tab-modal' }
   | { type: 'open-help-modal' }
   | { type: 'open-split-picker'; direction: import('./layout-tree').SplitDirection }
@@ -352,6 +389,23 @@ export type GitPanelAction =
   | { type: 'git-refresh-error'; kind: GitPanelError }
   | { type: 'git-panel-reset' }
 
+export type GitModeAction =
+  | { type: 'enter-git-mode' }
+  | { type: 'exit-git-mode' }
+  | { type: 'git-mode-select-file'; delta: -1 | 1 }
+  | { type: 'git-mode-set-diff'; path: string; diff: DiffData }
+  | { type: 'git-mode-set-loading'; path: string; loading: boolean }
+  | { type: 'git-mode-set-pending-delete'; path: string | null }
+  | { type: 'git-mode-clear-diff-cache'; path: string }
+  | { type: 'git-mode-set-message'; message: string | null }
+  | {
+      type: 'git-mode-optimistic-move'
+      path: string
+      fromSection: GitFileSection
+      toSection: GitFileSection | null
+    }
+  | { type: 'open-git-commit-modal' }
+
 // -- Data actions --
 export type DataAction =
   | { type: 'set-snippets'; snippets: SnippetRecord[] }
@@ -365,3 +419,4 @@ export type AppAction =
   | UIAction
   | DataAction
   | GitPanelAction
+  | GitModeAction

package/src/ui/components/git-commit-modal.tsx

@@ -0,0 +1,42 @@
+import { theme } from '../theme'
+import { uiTokens } from '../ui-tokens'
+import { InputField } from './input-field'
+import { ModalShell } from './modal-shell'
+
+interface GitCommitModalProps {
+  activeField: 'title' | 'body'
+  title: string
+  body: string
+  cursorPos: number
+}
+
+export function GitCommitModal({ activeField, body, cursorPos, title }: GitCommitModalProps) {
+  const titleActive = activeField === 'title'
+  const bodyActive = activeField === 'body'
+
+  return (
+    <ModalShell
+      title="Commit"
+      help="Tab switch · ←→ move cursor · Enter newline (body) · Ctrl+Enter commit · Esc cancel"
+      width={uiTokens.modalWidth.xl}
+    >
+      <box flexDirection="column">
+        <text fg={titleActive ? theme.text : theme.textMuted}>Title</text>
+        <InputField
+          active={titleActive}
+          cursorPos={titleActive ? cursorPos : undefined}
+          value={title}
+        />
+      </box>
+
+      <box flexDirection="column">
+        <text fg={bodyActive ? theme.text : theme.textMuted}>Body (optional)</text>
+        <InputField
+          active={bodyActive}
+          cursorPos={bodyActive ? cursorPos : undefined}
+          value={body}
+        />
+      </box>
+    </ModalShell>
+  )
+}

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

@@ -7,6 +7,11 @@ import { theme } from '../theme'
 interface GitPanelProps {
   gitPanel: GitPanelState
   projectPath: string | undefined
+  selectedFileKey?: string | null
+}
+
+export function fileKey(file: Pick<GitFileEntry, 'path' | 'section'>): string {
+  return `${file.section}:${file.path}`
 }
 
 const SECTION_ORDER: { key: GitFileSection; title: string }[] = [
@@ -16,7 +21,7 @@ const SECTION_ORDER: { key: GitFileSection; title: string }[] = [
 ]
 
 const STATUS_COLORS: Record<GitFileEntry['status'], string> = {
-  '?': theme.textMuted,
+  '?': theme.success,
   'A': theme.success,
   'C': theme.accent,
   'D': theme.danger,
@@ -25,6 +30,11 @@ const STATUS_COLORS: Record<GitFileEntry['status'], string> = {
   'U': theme.danger,
 }
 
+function displayStatus(file: GitFileEntry): string {
+  if (file.section === 'untracked') return 'A'
+  return file.status
+}
+
 function groupBySection(files: GitFileEntry[]): Record<GitFileSection, GitFileEntry[]> {
   const groups: Record<GitFileSection, GitFileEntry[]> = {
     staged: [],
@@ -87,25 +97,29 @@ function renderFileRow(
   file: GitFileEntry,
   key: string,
   addedW: number,
-  removedW: number
+  removedW: number,
+  isSelected: boolean
 ): ReactNode {
   const hasNumstat = file.added !== null || file.removed !== null
+  const bg = isSelected ? theme.panelHighlight : undefined
   return (
-    <box key={key} flexDirection="row" gap={1} paddingLeft={1}>
-      <text fg={STATUS_COLORS[file.status]}>
-        <strong>{file.status}</strong>
+    <box key={key} flexDirection="row" gap={1} paddingLeft={1} backgroundColor={bg}>
+      <text fg={STATUS_COLORS[file.status]} bg={bg}>
+        <strong>{displayStatus(file)}</strong>
       </text>
       <box flexGrow={1} overflow="hidden">
         {renderPath(file)}
       </box>
       {hasNumstat ? (
         <box flexDirection="row" flexShrink={0}>
-          <text fg={theme.success}>{`+${padRight(file.added, addedW)}`}</text>
-          <text fg={theme.dim}> </text>
-          <text fg={theme.danger}>{`−${padRight(file.removed, removedW)}`}</text>
+          <text fg={theme.success} bg={bg}>{`+${padRight(file.added, addedW)}`}</text>
+          <text fg={theme.dim} bg={bg}>
+            {' '}
+          </text>
+          <text fg={theme.danger} bg={bg}>{`−${padRight(file.removed, removedW)}`}</text>
         </box>
       ) : (
-        <text fg={theme.textMuted} flexShrink={0}>
+        <text fg={theme.textMuted} bg={bg} flexShrink={0}>
           —
         </text>
       )}
@@ -118,7 +132,8 @@ function renderSection(
   title: string,
   files: GitFileEntry[],
   addedW: number,
-  removedW: number
+  removedW: number,
+  selectedFileKey: string | null | undefined
 ): ReactNode {
   if (files.length === 0) return null
   return (
@@ -128,7 +143,15 @@ function renderSection(
           {title} ({files.length})
         </strong>
       </text>
-      {files.map((file, i) => renderFileRow(file, `${section}-${i}`, addedW, removedW))}
+      {files.map((file, i) =>
+        renderFileRow(
+          file,
+          `${section}-${i}`,
+          addedW,
+          removedW,
+          !!selectedFileKey && fileKey(file) === selectedFileKey
+        )
+      )}
     </box>
   )
 }
@@ -167,7 +190,11 @@ function computeStatusPlaceholder(
   return null
 }
 
-export const GitPanel = memo(function GitPanel({ gitPanel, projectPath }: GitPanelProps) {
+export const GitPanel = memo(function GitPanel({
+  gitPanel,
+  projectPath,
+  selectedFileKey,
+}: GitPanelProps) {
   const groups = useMemo(() => groupBySection(gitPanel.files), [gitPanel.files])
   const { added: addedW, removed: removedW } = useMemo(
     () => maxDigitWidth(gitPanel.files),
@@ -192,7 +219,9 @@ export const GitPanel = memo(function GitPanel({ gitPanel, projectPath }: GitPan
           viewportCulling
           contentOptions={{ flexDirection: 'column', gap: 0 }}
         >
-          {SECTION_ORDER.map((s) => renderSection(s.key, s.title, groups[s.key], addedW, removedW))}
+          {SECTION_ORDER.map((s) =>
+            renderSection(s.key, s.title, groups[s.key], addedW, removedW, selectedFileKey)
+          )}
         </scrollbox>
       )}
     </box>