@brimveyn/aimux 1.13.0 → 1.14.0

package/src/ui/components/git/diff-renderer/split-view.tsx

@@ -34,6 +34,30 @@ import { tokenToSpan } from './highlight'
 import { useSegmentVirtualization } from './use-segment-virtualization'
 
 const OVERSCAN = 24
+const COLUMN_CONTENT_OPTIONS = { flexDirection: 'column' as const, gap: 0 }
+const HIDDEN_SCROLLBAR_OPTIONS = { visible: false }
+
+// Stable per-row key derived from the line identities in the row, so rows keep a
+// consistent identity across fold expand/collapse rather than relying on position.
+function splitCellKey(cell: SplitCell): string {
+  switch (cell.type) {
+    case 'context':
+      return `c${cell.lineNumber}`
+    case 'addition':
+      return `a${cell.lineNumber}`
+    case 'deletion':
+      return `d${cell.lineNumber}`
+    case 'fold':
+      return `f${cell.fold.foldId}`
+    case 'filler':
+      return 'x'
+  }
+}
+
+function splitRowKey(row: SplitRowOrHeader): string {
+  if (row.type === 'hunk-header') return `hh:${row.spec}`
+  return `${splitCellKey(row.left)}|${splitCellKey(row.right)}`
+}
 
 export interface SplitViewHandle {
   leftScroll: ScrollBoxRenderable | null
@@ -154,15 +178,15 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
         flexGrow={1}
         scrollY
         viewportCulling
-        contentOptions={{ flexDirection: 'column', gap: 0 }}
-        verticalScrollbarOptions={{ visible: false }}
+        contentOptions={COLUMN_CONTENT_OPTIONS}
+        verticalScrollbarOptions={HIDDEN_SCROLLBAR_OPTIONS}
         onMouseScroll={handleScroll}
       >
         {visibleWindow.topSpacer > 0 ? <box height={visibleWindow.topSpacer} /> : null}
         {renderedSegments.map((rendered) =>
-          rendered.rows.map((row, i) => (
+          rendered.rows.map((row) => (
             <SideRow
-              key={`${rendered.segment.id}:left:${i}`}
+              key={`${rendered.segment.id}:left:${splitRowKey(row)}`}
               cell={row.type === 'row' ? row.left : null}
               foldDispatch={foldDispatch}
               gw={gw}
@@ -180,14 +204,14 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
         flexGrow={1}
         scrollY
         viewportCulling
-        contentOptions={{ flexDirection: 'column', gap: 0 }}
+        contentOptions={COLUMN_CONTENT_OPTIONS}
         onMouseScroll={handleScroll}
       >
         {visibleWindow.topSpacer > 0 ? <box height={visibleWindow.topSpacer} /> : null}
         {renderedSegments.map((rendered) =>
-          rendered.rows.map((row, i) => (
+          rendered.rows.map((row) => (
             <SideRow
-              key={`${rendered.segment.id}:right:${i}`}
+              key={`${rendered.segment.id}:right:${splitRowKey(row)}`}
               cell={row.type === 'row' ? row.right : null}
               foldDispatch={foldDispatch}
               gw={gw}
@@ -291,6 +315,8 @@ function LineContent({ content, tokens }: { content: string; tokens: ThemedToken
         if (s.italic === true) attributes |= TextAttributes.ITALIC
         if (s.underline === true) attributes |= TextAttributes.UNDERLINE
         return (
+          // Syntax tokens are positional within a single line and never reorder.
+          // eslint-disable-next-line react/no-array-index-key
           <span key={i} fg={s.fg ?? t.text} attributes={attributes}>
             {s.text}
           </span>

package/src/ui/components/git/diff-renderer/stacked-view.tsx

@@ -33,6 +33,24 @@ import { tokenToSpan } from './highlight'
 import { useSegmentVirtualization } from './use-segment-virtualization'
 
 const OVERSCAN = 24
+const COLUMN_CONTENT_OPTIONS = { flexDirection: 'column' as const, gap: 0 }
+
+// Stable per-row key derived from the line identities in the row, so rows keep a
+// consistent identity across fold expand/collapse rather than relying on position.
+function unifiedRowKey(row: UnifiedRowOrHeader): string {
+  switch (row.type) {
+    case 'hunk-header':
+      return `hh:${row.spec}`
+    case 'fold':
+      return `f:${row.fold.foldId}`
+    case 'context':
+      return `c:${row.delLineNumber}:${row.addLineNumber}`
+    case 'addition':
+      return `a:${row.lineNumber}`
+    case 'deletion':
+      return `d:${row.lineNumber}`
+  }
+}
 
 export interface StackedViewHandle {
   scroll: ScrollBoxRenderable | null
@@ -148,14 +166,14 @@ export const StackedView = forwardRef<StackedViewHandle, Props>(function Stacked
       flexGrow={1}
       scrollY
       viewportCulling
-      contentOptions={{ flexDirection: 'column', gap: 0 }}
+      contentOptions={COLUMN_CONTENT_OPTIONS}
       onMouseScroll={handleScroll}
     >
       {visibleWindow.topSpacer > 0 ? <box height={visibleWindow.topSpacer} /> : null}
       {renderedSegments.map((rendered) =>
-        rendered.rows.map((row, i) => (
+        rendered.rows.map((row) => (
           <UnifiedRowRender
-            key={`${rendered.segment.id}:${i}`}
+            key={`${rendered.segment.id}:${unifiedRowKey(row)}`}
             foldDispatch={foldDispatch}
             gw={gw}
             highlights={highlights}
@@ -236,6 +254,8 @@ function LineContent({ content, tokens }: { content: string; tokens: ThemedToken
         if (s.italic === true) attributes |= TextAttributes.ITALIC
         if (s.underline === true) attributes |= TextAttributes.UNDERLINE
         return (
+          // Syntax tokens are positional within a single line and never reorder.
+          // eslint-disable-next-line react/no-array-index-key
           <span key={i} fg={s.fg ?? t.text} attributes={attributes}>
             {s.text}
           </span>

package/src/ui/components/git/diff-renderer/use-diff-prefetch.ts

@@ -67,11 +67,15 @@ class PrefetchQueue {
       if (!task) break
       this.inflight.set(task.key, task.controller)
       this.running += 1
-      void this.execute(task).finally(() => {
-        this.inflight.delete(task.key)
-        this.running -= 1
-        this.pump()
-      })
+      void (async () => {
+        try {
+          await this.execute(task)
+        } finally {
+          this.inflight.delete(task.key)
+          this.running -= 1
+          this.pump()
+        }
+      })()
     }
   }
 }

package/src/ui/components/git/diff-renderer/use-diff-preparation.ts

@@ -124,8 +124,9 @@ export function useDiffPreparation(
     const owner = requestOwner
     const version = requestVersionRef.current
     setPreparing(true)
-    void prepareDiff(diff, path, { signal: controller.signal })
-      .then((result) => {
+    void (async () => {
+      try {
+        const result = await prepareDiff(diff, path, { signal: controller.signal })
         if (
           controller.signal.aborted ||
           requestVersionRef.current !== version ||
@@ -142,9 +143,9 @@ export function useDiffPreparation(
           key: cacheKey,
           type: 'git-mode-set-parsed',
         })
-      })
-      .catch(() => {})
-      .finally(() => {
+      } catch {
+        // Aborted or failed preparation; nothing to surface here.
+      } finally {
         if (
           !controller.signal.aborted &&
           requestVersionRef.current === version &&
@@ -152,7 +153,8 @@ export function useDiffPreparation(
         ) {
           setPreparing(false)
         }
-      })
+      }
+    })()
 
     return () => {
       controller.abort()

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

@@ -1,6 +1,6 @@
 import type { ScrollBoxRenderable } from '@opentui/core'
 
-import { memo, type ReactNode, useEffect, useMemo, useRef } from 'react'
+import { memo, type ReactNode, useCallback, useEffect, useMemo, useRef } from 'react'
 
 import type {
   GitFileEntry,
@@ -18,7 +18,7 @@ import {
   type GitTreeFileRow,
   type GitTreeFolderRow,
 } from '../../../state/git-tree'
-import { getCurrentTheme, getTransparent, useTheme, useTransparent } from '../../theme'
+import { getCurrentTheme, useTheme, useTransparent } from '../../theme'
 
 interface GitPanelProps {
   collapsedFolders?: Record<string, true>
@@ -167,23 +167,30 @@ function renderDiffCount(
   )
 }
 
-function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode {
-  const t = getCurrentTheme()
-  const bg = isSelected && !getTransparent() ? t.backgroundElement : undefined
-  const onSelect = (): void => {
+const FolderRow = memo(function FolderRow({
+  isSelected,
+  row,
+}: {
+  row: GitTreeFolderRow
+  isSelected: boolean
+}) {
+  const t = useTheme()
+  const transparent = useTransparent()
+  const bg = isSelected && !transparent ? t.backgroundElement : undefined
+  const onSelect = useCallback(() => {
     dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
-  }
-  const onToggle = (): void => {
+  }, [row.key])
+  const onToggle = useCallback(() => {
     dispatchGlobal({ key: row.key, type: 'git-mode-toggle-folder' })
-  }
+  }, [row.key])
   return (
-    <box key={row.key} flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
+    <box 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 selectable={false} fg={t.textMuted} bg={bg}>
             {row.isCollapsed ? '▸' : '▾'}
           </text>
-          <text selectable={false} fg={getCurrentTheme().textMuted} bg={bg}>
+          <text selectable={false} fg={t.textMuted} bg={bg}>
             {row.isCollapsed ? '\uf07b' : '\uf07c'}
           </text>
           <text selectable={false} fg={t.textMuted} bg={bg} wrapMode="none">
@@ -193,24 +200,35 @@ function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode
       </box>
     </box>
   )
-}
+})
 
-function renderFileRow(
-  row: GitTreeFileRow,
-  addedW: number,
-  removedW: number,
-  isSelected: boolean,
-  fileListMode: GitFileListMode,
-  pathConfig: GitPanePathConfig,
-  diffCountConfig: GitPaneDiffCountConfig,
+const FileRow = memo(function FileRow({
+  addedW,
+  diffCountConfig,
+  fileListMode,
+  isSelected,
+  pathConfig,
+  removedW,
+  repoPrefixes,
+  row,
+}: {
+  row: GitTreeFileRow
+  addedW: number
+  removedW: number
+  isSelected: boolean
+  fileListMode: GitFileListMode
+  pathConfig: GitPanePathConfig
+  diffCountConfig: GitPaneDiffCountConfig
   repoPrefixes: Record<string, string>
-): ReactNode {
+}) {
+  const t = useTheme()
+  const transparent = useTransparent()
   const file = row.file
   const hasNumstat = file.added !== null || file.removed !== null
-  const bg = isSelected && !getTransparent() ? getCurrentTheme().backgroundElement : undefined
-  const onSelect = (): void => {
+  const bg = isSelected && !transparent ? t.backgroundElement : undefined
+  const onSelect = useCallback(() => {
     dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
-  }
+  }, [row.key])
   // Repo disambiguation prefix: only in flat mode, only when the file came
   // from a sub-repo (root repo files get an empty prefix).
   const repoTag =
@@ -218,7 +236,7 @@ function renderFileRow(
       ? (repoPrefixes[file.repoPath] ?? '')
       : ''
   return (
-    <box key={row.key} flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
+    <box flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
       <box width={2} flexShrink={0} justifyContent="center">
         <text selectable={false} fg={statusColor(file.status)} bg={bg}>
           <strong>{displayStatus(file)}</strong>
@@ -226,7 +244,7 @@ function renderFileRow(
       </box>
       {repoTag ? (
         <box flexShrink={0}>
-          <text selectable={false} fg={getCurrentTheme().primary} bg={bg}>
+          <text selectable={false} fg={t.primary} bg={bg}>
             <strong>{repoTag}</strong>
           </text>
         </box>
@@ -237,32 +255,44 @@ function renderFileRow(
       {renderDiffCount(file, addedW, removedW, bg, diffCountConfig, hasNumstat)}
     </box>
   )
-}
+})
 
-function renderTreeSection(
-  section: GitFileSection,
-  title: string,
-  files: GitFileEntry[],
-  rows: (GitTreeFolderRow | GitTreeFileRow)[],
-  addedW: number,
-  removedW: number,
-  fileListMode: GitFileListMode,
-  selectedEntryKey: string | null | undefined,
-  showListModeToggle: boolean,
-  pathConfig: GitPanePathConfig,
-  diffCountConfig: GitPaneDiffCountConfig,
-  marginTop: number,
+const TreeSection = memo(function TreeSection({
+  addedW,
+  diffCountConfig,
+  fileListMode,
+  files,
+  marginTop,
+  pathConfig,
+  removedW,
+  repoPrefixes,
+  rows,
+  selectedEntryKey,
+  showListModeToggle,
+  title,
+}: {
+  title: string
+  files: GitFileEntry[]
+  rows: (GitTreeFolderRow | GitTreeFileRow)[]
+  addedW: number
+  removedW: number
+  fileListMode: GitFileListMode
+  selectedEntryKey: string | null | undefined
+  showListModeToggle: boolean
+  pathConfig: GitPanePathConfig
+  diffCountConfig: GitPaneDiffCountConfig
+  marginTop: number
   repoPrefixes: Record<string, string>
-): ReactNode {
-  if (files.length === 0) return null
-  const t2 = getCurrentTheme()
+}) {
+  const t2 = useTheme()
   const nextFileListMode = fileListMode === 'tree' ? 'flat' : 'tree'
-  const toggleListMode = (): void => {
+  const toggleListMode = useCallback(() => {
     dispatchGlobal({ type: 'git-mode-toggle-file-list-mode' })
     runSideEffectGlobal({ mode: nextFileListMode, type: 'persist-git-file-list-mode' })
-  }
+  }, [nextFileListMode])
+  if (files.length === 0) return null
   return (
-    <box key={section} flexDirection="column" marginTop={marginTop}>
+    <box flexDirection="column" marginTop={marginTop}>
       <box flexDirection="row" justifyContent="space-between">
         <text selectable={false} fg={t2.text}>
           <strong>
@@ -284,22 +314,25 @@ function renderTreeSection(
         ) : null}
       </box>
       {rows.map((row) =>
-        row.kind === 'folder'
-          ? renderFolderRow(row, row.key === selectedEntryKey)
-          : renderFileRow(
-              row,
-              addedW,
-              removedW,
-              row.key === selectedEntryKey,
-              fileListMode,
-              pathConfig,
-              diffCountConfig,
-              repoPrefixes
-            )
+        row.kind === 'folder' ? (
+          <FolderRow key={row.key} row={row} isSelected={row.key === selectedEntryKey} />
+        ) : (
+          <FileRow
+            key={row.key}
+            row={row}
+            addedW={addedW}
+            removedW={removedW}
+            isSelected={row.key === selectedEntryKey}
+            fileListMode={fileListMode}
+            pathConfig={pathConfig}
+            diffCountConfig={diffCountConfig}
+            repoPrefixes={repoPrefixes}
+          />
+        )
       )}
     </box>
   )
-}
+})
 
 interface StatusPlaceholder {
   label: string
@@ -340,6 +373,10 @@ function computeStatusPlaceholder(
 
 const DEFAULT_PATH_CONFIG: GitPanePathConfig = { enabled: true }
 const DEFAULT_DIFF_COUNT_CONFIG: GitPaneDiffCountConfig = { enabled: true }
+const HIDDEN_SCROLLBAR_OPTIONS = { visible: false }
+const COLUMN_CONTENT_OPTIONS = { flexDirection: 'column' as const, gap: 0 }
+const EMPTY_FILES: GitFileEntry[] = []
+const EMPTY_ROWS: (GitTreeFolderRow | GitTreeFileRow)[] = []
 
 export const GitPanel = memo(function GitPanel({
   baseLabel,
@@ -399,29 +436,31 @@ export const GitPanel = memo(function GitPanel({
           flexGrow={1}
           ref={scrollRef}
           scrollY
-          scrollbarOptions={{ visible: false }}
+          scrollbarOptions={HIDDEN_SCROLLBAR_OPTIONS}
           viewportCulling
-          contentOptions={{ flexDirection: 'column', gap: 0 }}
+          contentOptions={COLUMN_CONTENT_OPTIONS}
         >
           {sectionOrder.map((key, idx) => {
             const section = tree.sections.find((entry) => entry.section === key)
             const priorHasFiles = sectionOrder
               .slice(0, idx)
               .some((k) => (tree.sections.find((e) => e.section === k)?.files.length ?? 0) > 0)
-            return renderTreeSection(
-              key,
-              sectionTitle(key, headOffset, baseLabel),
-              section?.files ?? [],
-              section?.rows ?? [],
-              addedW,
-              removedW,
-              fileListMode,
-              selectedEntryKey,
-              key === toggleSection,
-              pathConfig,
-              diffCountConfig,
-              priorHasFiles ? 1 : 0,
-              repoPrefixes
+            return (
+              <TreeSection
+                key={key}
+                title={sectionTitle(key, headOffset, baseLabel)}
+                files={section?.files ?? EMPTY_FILES}
+                rows={section?.rows ?? EMPTY_ROWS}
+                addedW={addedW}
+                removedW={removedW}
+                fileListMode={fileListMode}
+                selectedEntryKey={selectedEntryKey}
+                showListModeToggle={key === toggleSection}
+                pathConfig={pathConfig}
+                diffCountConfig={diffCountConfig}
+                marginTop={priorHasFiles ? 1 : 0}
+                repoPrefixes={repoPrefixes}
+              />
             )
           })}
         </scrollbox>

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

@@ -1,5 +1,7 @@
+import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
+
 import { useTerminalDimensions } from '@opentui/react'
-import { memo, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 
 import type { DiffData, GitDiffView } from '../../../state/types'
 import type { ThemeId } from '../../themes'
@@ -145,9 +147,10 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
       return
     }
     let cancelled = false
-    void getMergeBase(projectPath, reviewBaseRef).then((mergeBase) => {
+    void (async () => {
+      const mergeBase = await getMergeBase(projectPath, reviewBaseRef)
       if (!cancelled) setCompareRef(mergeBase)
-    })
+    })()
     return () => {
       cancelled = true
     }
@@ -207,23 +210,24 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
     if (!(selectedDiffKey != null && selectedDiffKey !== '')) return
     if (diff || loading) return
     dispatchGlobal({ key: selectedDiffKey, loading: true, type: 'git-mode-set-loading' })
-    void fetchDiff(
-      selectedFile.repoPath ?? projectPath,
-      selectedFile,
-      gitMode.headOffset,
-      compareRef
-    )
-      .then((d) =>
+    void (async () => {
+      try {
+        const d = await fetchDiff(
+          selectedFile.repoPath ?? projectPath,
+          selectedFile,
+          gitMode.headOffset,
+          compareRef
+        )
         dispatchGlobal({
           diff: d,
           hash: diffHash(d.rawDiff),
           key: selectedDiffKey,
           type: 'git-mode-set-diff',
         })
-      )
-      .catch(() =>
+      } catch {
         dispatchGlobal({ key: selectedDiffKey, loading: false, type: 'git-mode-set-loading' })
-      )
+      }
+    })()
   }, [
     focusMode,
     projectPath,
@@ -256,6 +260,8 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
     )
   } else if (actionMessage != null && actionMessage !== '') {
     footerNode = actionMessage.split('\n').map((line, idx) => (
+      // Message lines are positional and may repeat (e.g. blank lines); index is the identity.
+      // eslint-disable-next-line react/no-array-index-key
       <text key={idx} fg={t.primary}>
         {line}
       </text>
@@ -264,6 +270,12 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
 
   const baseLabel = compareRef != null && reviewBaseRef != null ? `vs ${reviewBaseRef}` : undefined
 
+  const handleExitDiff = useCallback((event: OtuiMouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    dispatchGlobal({ type: 'exit-git-mode' })
+  }, [])
+
   return (
     <box flexDirection="column" flexGrow={1} overflow="hidden">
       <box flexDirection="row" flexGrow={1}>
@@ -331,11 +343,7 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
               paddingLeft={1}
               paddingRight={1}
               backgroundColor={actionBg}
-              onMouseDown={(event) => {
-                event.preventDefault()
-                event.stopPropagation()
-                dispatchGlobal({ type: 'exit-git-mode' })
-              }}
+              onMouseDown={handleExitDiff}
             >
               <text fg={t.text}>
                 <strong>Exit diff</strong>

package/src/ui/components/git/image-diff/terminal-image-pane.tsx

@@ -1,6 +1,6 @@
 import type { BoxRenderable } from '@opentui/core'
 
-import { memo, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 
 import { convertToPng, isPng } from '../../../terminal-graphics/format-fallback'
 import {
@@ -77,15 +77,7 @@ export const TerminalImagePane = memo(function TerminalImagePane({
     }
   }, [bytes, mime])
 
-  if (error != null && error !== '') {
-    return (
-      <box flexGrow={1} alignItems="center" justifyContent="center" padding={1}>
-        <text fg={t.warning}>({error})</text>
-      </box>
-    )
-  }
-
-  function renderAfter(this: BoxRenderable): void {
+  const renderAfter = useCallback(function (this: BoxRenderable): void {
     const state = stateRef.current
     if (!state.uploaded || state.imageId === null) return
     const key = `${this.screenX},${this.screenY},${this.width},${this.height}`
@@ -94,6 +86,14 @@ export const TerminalImagePane = memo(function TerminalImagePane({
     const seq = buildPlacement(state.imageId, this.screenX, this.screenY)
     // Queue write to land AFTER opentui's native cell flush in this frame.
     process.nextTick(() => writeRaw(seq))
+  }, [])
+
+  if (error != null && error !== '') {
+    return (
+      <box flexGrow={1} alignItems="center" justifyContent="center" padding={1}>
+        <text fg={t.warning}>({error})</text>
+      </box>
+    )
   }
 
   return <box flexGrow={1} renderAfter={renderAfter} />