@brimveyn/aimux 1.5.0 → 1.6.0

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

@@ -17,7 +17,13 @@ export function GitCommitModal({ activeField, body, cursorPos, title }: GitCommi
   return (
     <ModalShell title="Commit" keybindsModeId="modal.git-commit" width={uiTokens.modalWidth.xl}>
       <box flexDirection="column">
-        <text fg={titleActive ? theme.text : theme.textMuted}>Title</text>
+        <text
+          fg={
+            titleActive ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
+          }
+        >
+          Title
+        </text>
         <InputField
           active={titleActive}
           cursorPos={titleActive ? cursorPos : undefined}
@@ -26,7 +32,13 @@ export function GitCommitModal({ activeField, body, cursorPos, title }: GitCommi
       </box>
 
       <box flexDirection="column">
-        <text fg={bodyActive ? theme.text : theme.textMuted}>Body (optional)</text>
+        <text
+          fg={
+            bodyActive ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
+          }
+        >
+          Body (optional)
+        </text>
         <InputField
           active={bodyActive}
           cursorPos={bodyActive ? cursorPos : undefined}

package/src/ui/components/git-pane-widget.tsx

@@ -12,6 +12,8 @@ interface GitPaneWidgetProps {
 
 export const GitPaneWidget = memo(function GitPaneWidget({ pollingEnabled }: GitPaneWidgetProps) {
   const gitPanel = useAppStore((s) => s.gitPanel)
+  const gitMode = useAppStore((s) => s.gitMode)
+  const gitFileListMode = useAppStore((s) => s.gitPane.fileListMode)
   const pathConfig = useAppStore((s) => s.gitPane.path)
   const diffCountConfig = useAppStore((s) => s.gitPane.diffCount)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
@@ -37,10 +39,13 @@ export const GitPaneWidget = memo(function GitPaneWidget({ pollingEnabled }: Git
 
   return (
     <GitPanel
+      collapsedFolders={gitMode.collapsedFolders}
       diffCountConfig={diffCountConfig}
+      fileListMode={gitFileListMode}
       gitPanel={display}
       pathConfig={pathConfig}
       projectPath={projectPath}
+      selectedEntryKey={gitMode.selectedEntryKey}
     />
   )
 })

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

@@ -1,27 +1,30 @@
-import { memo, type ReactNode, useMemo } from 'react'
+import type { ScrollBoxRenderable } from '@opentui/core'
+
+import { memo, type ReactNode, useEffect, useMemo, useRef } from 'react'
 
 import type {
   GitFileEntry,
+  GitFileListMode,
   GitFileSection,
   GitPaneDiffCountConfig,
   GitPanelState,
   GitPanePathConfig,
 } from '../../state/types'
 
+import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
+import { buildGitTreeRows, type GitTreeFileRow, type GitTreeFolderRow } from '../../state/git-tree'
 import { theme } from '../theme'
 
 interface GitPanelProps {
+  collapsedFolders?: Record<string, true>
+  fileListMode?: GitFileListMode
   gitPanel: GitPanelState
   projectPath: string | undefined
-  selectedFileKey?: string | null
+  selectedEntryKey?: string | null
   pathConfig?: GitPanePathConfig
   diffCountConfig?: GitPaneDiffCountConfig
 }
 
-export function fileKey(file: Pick<GitFileEntry, 'path' | 'section'>): string {
-  return `${file.section}:${file.path}`
-}
-
 const SECTION_ORDER: { key: GitFileSection; title: string }[] = [
   { key: 'staged', title: 'Staged Changes' },
   { key: 'unstaged', title: 'Changes' },
@@ -29,13 +32,13 @@ const SECTION_ORDER: { key: GitFileSection; title: string }[] = [
 ]
 
 const STATUS_COLORS: Record<GitFileEntry['status'], string> = {
-  '?': theme.success,
-  'A': theme.success,
-  'C': theme.accent,
-  'D': theme.danger,
-  'M': theme.warning,
-  'R': theme.accent,
-  'U': theme.danger,
+  '?': theme.colors['gitDecoration.addedResourceForeground'],
+  'A': theme.colors['gitDecoration.addedResourceForeground'],
+  'C': theme.colors['textLink.foreground'],
+  'D': theme.colors['editorError.foreground'],
+  'M': theme.colors['editorWarning.foreground'],
+  'R': theme.colors['textLink.foreground'],
+  'U': theme.colors['editorError.foreground'],
 }
 
 function displayStatus(file: GitFileEntry): string {
@@ -43,16 +46,6 @@ function displayStatus(file: GitFileEntry): string {
   return file.status
 }
 
-function groupBySection(files: GitFileEntry[]): Record<GitFileSection, GitFileEntry[]> {
-  const groups: Record<GitFileSection, GitFileEntry[]> = {
-    staged: [],
-    unstaged: [],
-    untracked: [],
-  }
-  for (const file of files) groups[file.section].push(file)
-  return groups
-}
-
 function maxDigitWidth(files: GitFileEntry[]): { added: number; removed: number } {
   let addedMax = 1
   let removedMax = 1
@@ -67,7 +60,7 @@ function padRight(value: number | null, width: number): string {
   return String(value ?? 0).padStart(width, ' ')
 }
 
-export function splitPath(path: string): { prefix: string; basename: string } {
+function splitPath(path: string): { prefix: string; basename: string } {
   const slash = path.lastIndexOf('/')
   if (slash < 0) return { basename: path, prefix: '' }
   return { basename: path.slice(slash + 1), prefix: path.slice(0, slash + 1) }
@@ -77,30 +70,36 @@ function stripTrailingSlash(prefix: string): string {
   return prefix.endsWith('/') ? prefix.slice(0, -1) : prefix
 }
 
-function renderPath(file: GitFileEntry, pathConfig: GitPanePathConfig): ReactNode {
-  const showDir = pathConfig.enabled
+function renderFileLabel(
+  file: GitFileEntry,
+  pathConfig: GitPanePathConfig,
+  fileListMode: GitFileListMode
+): ReactNode {
   const transform = pathConfig.enabled ? pathConfig.pathFn : undefined
   const displayPath = transform ? transform(file.path) : file.path
   const { basename, prefix } = splitPath(displayPath)
   const dir = stripTrailingSlash(prefix)
-  if (file.renamedFrom) {
-    const renamedDisplay = transform ? transform(file.renamedFrom) : file.renamedFrom
-    const renamed = splitPath(renamedDisplay)
-    const renamedDir = stripTrailingSlash(renamed.prefix)
+  const showDir = fileListMode === 'flat' && pathConfig.enabled && dir
+  if (!file.renamedFrom) {
     return (
       <text wrapMode="none">
-        <span fg={theme.text}>{renamed.basename}</span>
-        {showDir && renamedDir ? <span fg={theme.textMuted}> {renamedDir}</span> : null}
-        <span fg={theme.textMuted}> → </span>
-        <span fg={theme.text}>{basename}</span>
-        {showDir && dir ? <span fg={theme.textMuted}> {dir}</span> : null}
+        <span fg={theme.colors['editor.foreground']}>{basename}</span>
+        {showDir ? <span fg={theme.colors['descriptionForeground']}> {dir}</span> : null}
       </text>
     )
   }
+  const renamedDisplay = transform ? transform(file.renamedFrom) : file.renamedFrom
+  const renamed = splitPath(renamedDisplay)
+  const renamedDir = stripTrailingSlash(renamed.prefix)
   return (
     <text wrapMode="none">
-      <span fg={theme.text}>{basename}</span>
-      {showDir && dir ? <span fg={theme.textMuted}> {dir}</span> : null}
+      <span fg={theme.colors['descriptionForeground']}>{renamed.basename}</span>
+      {showDir && renamedDir ? (
+        <span fg={theme.colors['descriptionForeground']}> {renamedDir}</span>
+      ) : null}
+      <span fg={theme.colors['descriptionForeground']}> → </span>
+      <span fg={theme.colors['editor.foreground']}>{basename}</span>
+      {showDir ? <span fg={theme.colors['descriptionForeground']}> {dir}</span> : null}
     </text>
   )
 }
@@ -116,74 +115,145 @@ function renderDiffCount(
   if (!diffCountConfig.enabled) return null
   if (!hasNumstat) {
     return (
-      <text fg={theme.textMuted} bg={bg} flexShrink={0}>
+      <text fg={theme.colors['descriptionForeground']} bg={bg} flexShrink={0}>
         —
       </text>
     )
   }
   return (
     <box flexDirection="row" flexShrink={0}>
-      <text fg={theme.success} bg={bg}>{`+${padRight(file.added, addedW)}`}</text>
-      <text fg={theme.dim} bg={bg}>
+      <text
+        fg={theme.colors['gitDecoration.addedResourceForeground']}
+        bg={bg}
+      >{`+${padRight(file.added, addedW)}`}</text>
+      <text fg={theme.colors['editor.lineHighlightBackground']} bg={bg}>
         {' '}
       </text>
-      <text fg={theme.danger} bg={bg}>{`−${padRight(file.removed, removedW)}`}</text>
+      <text
+        fg={theme.colors['editorError.foreground']}
+        bg={bg}
+      >{`−${padRight(file.removed, removedW)}`}</text>
+    </box>
+  )
+}
+
+function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode {
+  const bg = isSelected ? theme.colors['list.activeSelectionBackground'] : undefined
+  const onSelect = (): void => {
+    dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
+  }
+  const onToggle = (): void => {
+    dispatchGlobal({ key: row.key, type: 'git-mode-toggle-folder' })
+  }
+  return (
+    <box key={row.key} flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
+      <box flexGrow={1} overflow="hidden" paddingLeft={row.depth * 2}>
+        <box flexDirection="row" gap={1} onMouseDown={onToggle}>
+          <text fg={theme.colors['descriptionForeground']} bg={bg}>
+            {row.isCollapsed ? '▸' : '▾'}
+          </text>
+          <text fg={theme.colors['terminal.ansiMagenta']} bg={bg} wrapMode="none">
+            {row.name}
+          </text>
+        </box>
+      </box>
     </box>
   )
 }
 
 function renderFileRow(
-  file: GitFileEntry,
-  key: string,
+  row: GitTreeFileRow,
   addedW: number,
   removedW: number,
   isSelected: boolean,
+  fileListMode: GitFileListMode,
   pathConfig: GitPanePathConfig,
   diffCountConfig: GitPaneDiffCountConfig
 ): ReactNode {
+  const file = row.file
   const hasNumstat = file.added !== null || file.removed !== null
-  const bg = isSelected ? theme.panelHighlight : undefined
+  const bg = isSelected ? theme.colors['list.activeSelectionBackground'] : undefined
+  const onSelect = (): void => {
+    dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
+  }
   return (
-    <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, pathConfig)}
+    <box key={row.key} flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
+      <box width={2} flexShrink={0} justifyContent="center">
+        <text fg={STATUS_COLORS[file.status]} bg={bg}>
+          <strong>{displayStatus(file)}</strong>
+        </text>
+      </box>
+      <box flexGrow={1} overflow="hidden" paddingLeft={fileListMode === 'tree' ? row.depth * 2 : 0}>
+        {renderFileLabel(file, pathConfig, fileListMode)}
       </box>
       {renderDiffCount(file, addedW, removedW, bg, diffCountConfig, hasNumstat)}
     </box>
   )
 }
 
-function renderSection(
+function renderTreeSection(
   section: GitFileSection,
   title: string,
   files: GitFileEntry[],
+  rows: Array<GitTreeFolderRow | GitTreeFileRow>,
   addedW: number,
   removedW: number,
-  selectedFileKey: string | null | undefined,
+  fileListMode: GitFileListMode,
+  selectedEntryKey: string | null | undefined,
+  showListModeToggle: boolean,
   pathConfig: GitPanePathConfig,
   diffCountConfig: GitPaneDiffCountConfig
 ): ReactNode {
   if (files.length === 0) return null
+  const nextFileListMode = fileListMode === 'tree' ? 'flat' : 'tree'
+  const toggleListMode = (): void => {
+    dispatchGlobal({ type: 'git-mode-toggle-file-list-mode' })
+    runSideEffectGlobal({ mode: nextFileListMode, type: 'persist-git-file-list-mode' })
+  }
   return (
     <box key={section} flexDirection="column">
-      <text fg={theme.accentAlt}>
-        <strong>
-          {title} ({files.length})
-        </strong>
-      </text>
-      {files.map((file, i) =>
-        renderFileRow(
-          file,
-          `${section}-${i}`,
-          addedW,
-          removedW,
-          !!selectedFileKey && fileKey(file) === selectedFileKey,
-          pathConfig,
-          diffCountConfig
-        )
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={theme.colors['terminal.ansiMagenta']}>
+          <strong>
+            {title} ({files.length})
+          </strong>
+        </text>
+        {showListModeToggle ? (
+          <box flexDirection="row" gap={1} onMouseDown={toggleListMode}>
+            <text
+              fg={
+                fileListMode === 'tree'
+                  ? theme.colors['textLink.foreground']
+                  : theme.colors['descriptionForeground']
+              }
+            >
+              tree
+            </text>
+            <text fg={theme.colors['descriptionForeground']}>|</text>
+            <text
+              fg={
+                fileListMode === 'flat'
+                  ? theme.colors['textLink.foreground']
+                  : theme.colors['descriptionForeground']
+              }
+            >
+              flat
+            </text>
+          </box>
+        ) : null}
+      </box>
+      {rows.map((row) =>
+        row.kind === 'folder'
+          ? renderFolderRow(row, row.key === selectedEntryKey)
+          : renderFileRow(
+              row,
+              addedW,
+              removedW,
+              row.key === selectedEntryKey,
+              fileListMode,
+              pathConfig,
+              diffCountConfig
+            )
       )}
     </box>
   )
@@ -209,16 +279,16 @@ function computeStatusPlaceholder(
   hasProjectPath: boolean
 ): StatusPlaceholder | null {
   if (!hasProjectPath) {
-    return { label: 'No active session', labelColor: theme.textMuted }
+    return { label: 'No active session', labelColor: theme.colors['descriptionForeground'] }
   }
   if (gitPanel.error === 'not-a-repo') {
-    return { label: 'Not a git repository', labelColor: theme.textMuted }
+    return { label: 'Not a git repository', labelColor: theme.colors['descriptionForeground'] }
   }
   if (gitPanel.error === 'unknown') {
-    return { label: 'Git error', labelColor: theme.danger }
+    return { label: 'Git error', labelColor: theme.colors['editorError.foreground'] }
   }
   if (gitPanel.files.length === 0) {
-    return { label: 'Working tree clean', labelColor: theme.textMuted }
+    return { label: 'Working tree clean', labelColor: theme.colors['descriptionForeground'] }
   }
   return null
 }
@@ -227,13 +297,19 @@ const DEFAULT_PATH_CONFIG: GitPanePathConfig = { enabled: true }
 const DEFAULT_DIFF_COUNT_CONFIG: GitPaneDiffCountConfig = { enabled: true }
 
 export const GitPanel = memo(function GitPanel({
+  collapsedFolders = {},
   diffCountConfig = DEFAULT_DIFF_COUNT_CONFIG,
+  fileListMode = 'tree',
   gitPanel,
   pathConfig = DEFAULT_PATH_CONFIG,
   projectPath,
-  selectedFileKey,
+  selectedEntryKey,
 }: GitPanelProps) {
-  const groups = useMemo(() => groupBySection(gitPanel.files), [gitPanel.files])
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+  const tree = useMemo(
+    () => buildGitTreeRows(gitPanel.files, collapsedFolders, fileListMode),
+    [collapsedFolders, fileListMode, gitPanel.files]
+  )
   const { added: addedW, removed: removedW } = useMemo(
     () => maxDigitWidth(gitPanel.files),
     [gitPanel.files]
@@ -242,33 +318,54 @@ export const GitPanel = memo(function GitPanel({
   const statusNode = renderStatus(gitPanel, !!projectPath)
 
   const hasRemoteTracking = gitPanel.ahead > 0 || gitPanel.behind > 0
+  const toggleSection =
+    tree.sections.find((section) => section.section === 'unstaged' && section.files.length > 0)
+      ?.section ??
+    tree.sections.find((section) => section.files.length > 0)?.section ??
+    null
+
+  useEffect(() => {
+    const scrollbox = scrollRef.current
+    if (!scrollbox || !selectedEntryKey) return
+    const selectedIndex = tree.visibleRows.findIndex((row) => row.key === selectedEntryKey)
+    if (selectedIndex < 0) return
+    const viewportHeight = Math.max(1, scrollbox.viewport.height)
+    const target = Math.max(0, selectedIndex - Math.floor(viewportHeight / 2))
+    scrollbox.scrollTo({ x: 0, y: target })
+  }, [selectedEntryKey, tree.visibleRows])
 
   return (
     <box flexDirection="column" flexGrow={1} gap={0}>
       {hasRemoteTracking ? (
-        <text fg={theme.textMuted}>
+        <text fg={theme.colors['descriptionForeground']}>
           ↑{gitPanel.ahead} ↓{gitPanel.behind}
         </text>
       ) : null}
       {statusNode ?? (
         <scrollbox
           flexGrow={1}
+          ref={scrollRef}
           scrollY
+          scrollbarOptions={{ visible: false }}
           viewportCulling
           contentOptions={{ flexDirection: 'column', gap: 0 }}
         >
-          {SECTION_ORDER.map((s) =>
-            renderSection(
+          {SECTION_ORDER.map((s) => {
+            const section = tree.sections.find((entry) => entry.section === s.key)
+            return renderTreeSection(
               s.key,
               s.title,
-              groups[s.key],
+              section?.files ?? [],
+              section?.rows ?? [],
               addedW,
               removedW,
-              selectedFileKey,
+              fileListMode,
+              selectedEntryKey,
+              s.key === toggleSection,
               pathConfig,
               diffCountConfig
             )
-          )}
+          })}
         </scrollbox>
       )}
     </box>