@brimveyn/aimux 1.6.0 → 1.6.2

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

@@ -5,7 +5,7 @@ import {
   type ScrollBoxRenderable,
   TextAttributes,
 } from '@opentui/core'
-import { forwardRef, useImperativeHandle, useRef } from 'react'
+import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react'
 
 import type { FileDiffMetadata } from '../../../diff-parser'
 import type { FoldState } from '../../../state/types'
@@ -13,11 +13,16 @@ import type { DiffHighlights, FoldDispatch } from './pierre-diff'
 
 import { getScrollViewportDelta } from '../../../app-runtime/terminal-mouse-adapter'
 import { scrollGitDiff } from '../../git-view-controls'
-import { theme } from '../../theme'
+import { useTheme } from '../../theme'
 import { buildSplitRows, gutterWidth, type SplitCell, type SplitRowOrHeader } from './build-rows'
 import { FoldStrip } from './fold-strip'
 import { tokenToSpan } from './highlight'
 
+// Cap DOM size for extreme diffs. Rows beyond this are hidden behind a banner;
+// users scroll within the visible window. Shiki highlighting is already skipped
+// upstream in prepare-diff for similarly large diffs.
+const LARGE_ROW_CAP = 5000
+
 export interface SplitViewHandle {
   leftScroll: ScrollBoxRenderable | null
   rightScroll: ScrollBoxRenderable | null
@@ -43,6 +48,7 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
   { contentWidth, file, foldDispatch, folds, highlights },
   ref
 ) {
+  const theme = useTheme()
   const leftRef = useRef<ScrollBoxRenderable | null>(null)
   const rightRef = useRef<ScrollBoxRenderable | null>(null)
 
@@ -59,8 +65,10 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
     []
   )
 
-  const rows = buildSplitRows(file, folds, contentWidth)
-  const gw = gutterWidth(file)
+  const rows = useMemo(() => buildSplitRows(file, folds, contentWidth), [file, folds, contentWidth])
+  const gw = useMemo(() => gutterWidth(file), [file])
+  const truncated = rows.length > LARGE_ROW_CAP
+  const displayRows = truncated ? rows.slice(0, LARGE_ROW_CAP) : rows
 
   return (
     <box flexDirection="row" flexGrow={1} overflow="hidden" onMouseScroll={handleScroll}>
@@ -73,7 +81,7 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
         verticalScrollbarOptions={{ visible: false }}
         onMouseScroll={handleScroll}
       >
-        {rows.map((row, i) => (
+        {displayRows.map((row, i) => (
           <SideRow
             key={i}
             cell={row.type === 'row' ? row.left : null}
@@ -84,6 +92,7 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
             tokens={highlights.del}
           />
         ))}
+        {truncated ? <TruncationNotice hidden={rows.length - displayRows.length} /> : null}
       </scrollbox>
       <box width={1} backgroundColor={theme.colors['editor.background']} />
       <scrollbox
@@ -94,7 +103,7 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
         contentOptions={{ flexDirection: 'column', gap: 0 }}
         onMouseScroll={handleScroll}
       >
-        {rows.map((row, i) => (
+        {displayRows.map((row, i) => (
           <SideRow
             key={i}
             cell={row.type === 'row' ? row.right : null}
@@ -105,11 +114,28 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
             tokens={highlights.add}
           />
         ))}
+        {truncated ? <TruncationNotice hidden={rows.length - displayRows.length} /> : null}
       </scrollbox>
     </box>
   )
 })
 
+function TruncationNotice({ hidden }: { hidden: number }) {
+  const theme = useTheme()
+  return (
+    <box
+      flexDirection="row"
+      backgroundColor={theme.colors['sideBarSectionHeader.background']}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <text fg={theme.colors['editorWarning.foreground']}>
+        …diff truncated — {hidden} more rows hidden
+      </text>
+    </box>
+  )
+}
+
 function SideRow({
   cell,
   foldDispatch,
@@ -132,6 +158,7 @@ function SideRow({
 }
 
 function HunkHeaderRow({ row }: { row: Extract<SplitRowOrHeader, { type: 'hunk-header' }> }) {
+  const theme = useTheme()
   return (
     <box
       flexDirection="row"
@@ -158,6 +185,7 @@ function HalfRow({
   height: number
   tokens: ThemedToken[][]
 }) {
+  const theme = useTheme()
   if (cell.type === 'filler') {
     return <box backgroundColor={theme.colors['sideBarSectionHeader.background']} height={height} />
   }
@@ -185,6 +213,7 @@ function HalfRow({
 }
 
 function LineContent({ content, tokens }: { content: string; tokens: ThemedToken[] | undefined }) {
+  const theme = useTheme()
   if (!tokens || tokens.length === 0) {
     return <text fg={theme.colors['editor.foreground']}>{content}</text>
   }

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

@@ -5,7 +5,7 @@ import {
   type ScrollBoxRenderable,
   TextAttributes,
 } from '@opentui/core'
-import { forwardRef, useImperativeHandle, useRef } from 'react'
+import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react'
 
 import type { FileDiffMetadata } from '../../../diff-parser'
 import type { FoldState } from '../../../state/types'
@@ -13,11 +13,14 @@ import type { DiffHighlights, FoldDispatch } from './pierre-diff'
 
 import { getScrollViewportDelta } from '../../../app-runtime/terminal-mouse-adapter'
 import { scrollGitDiff } from '../../git-view-controls'
-import { theme } from '../../theme'
+import { useTheme } from '../../theme'
 import { buildUnifiedRows, gutterWidth, type UnifiedRowOrHeader } from './build-rows'
 import { FoldStrip } from './fold-strip'
 import { tokenToSpan } from './highlight'
 
+// Same cap as split-view — keeps the React child count bounded.
+const LARGE_ROW_CAP = 5000
+
 export interface StackedViewHandle {
   scroll: ScrollBoxRenderable | null
 }
@@ -54,8 +57,13 @@ export const StackedView = forwardRef<StackedViewHandle, Props>(function Stacked
     []
   )
 
-  const rows = buildUnifiedRows(file, folds, contentWidth)
-  const gw = gutterWidth(file)
+  const rows = useMemo(
+    () => buildUnifiedRows(file, folds, contentWidth),
+    [file, folds, contentWidth]
+  )
+  const gw = useMemo(() => gutterWidth(file), [file])
+  const truncated = rows.length > LARGE_ROW_CAP
+  const displayRows = truncated ? rows.slice(0, LARGE_ROW_CAP) : rows
 
   return (
     <scrollbox
@@ -66,7 +74,7 @@ export const StackedView = forwardRef<StackedViewHandle, Props>(function Stacked
       contentOptions={{ flexDirection: 'column', gap: 0 }}
       onMouseScroll={handleScroll}
     >
-      {rows.map((row, i) => (
+      {displayRows.map((row, i) => (
         <UnifiedRowRender
           key={i}
           foldDispatch={foldDispatch}
@@ -75,10 +83,27 @@ export const StackedView = forwardRef<StackedViewHandle, Props>(function Stacked
           row={row}
         />
       ))}
+      {truncated ? <TruncationNotice hidden={rows.length - displayRows.length} /> : null}
     </scrollbox>
   )
 })
 
+function TruncationNotice({ hidden }: { hidden: number }) {
+  const theme = useTheme()
+  return (
+    <box
+      flexDirection="row"
+      backgroundColor={theme.colors['sideBarSectionHeader.background']}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <text fg={theme.colors['editorWarning.foreground']}>
+        …diff truncated — {hidden} more rows hidden
+      </text>
+    </box>
+  )
+}
+
 function UnifiedRowRender({
   foldDispatch,
   gw,
@@ -90,6 +115,7 @@ function UnifiedRowRender({
   highlights: DiffHighlights
   row: UnifiedRowOrHeader
 }) {
+  const theme = useTheme()
   if (row.type === 'hunk-header') {
     return (
       <box
@@ -144,6 +170,7 @@ function UnifiedRowRender({
 }
 
 function LineContent({ content, tokens }: { content: string; tokens: ThemedToken[] | undefined }) {
+  const theme = useTheme()
   if (!tokens || tokens.length === 0) {
     return <text fg={theme.colors['editor.foreground']}>{content}</text>
   }

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

@@ -0,0 +1,191 @@
+import { useEffect, useRef } from 'react'
+
+import type { GitFileEntry } from '../../../state/types'
+
+import { diffHash } from '../../../git/diff-hash'
+import { fetchDiff } from '../../../git/git-diff'
+import { useAppStore } from '../../../state/app-store'
+import { dispatchGlobal } from '../../../state/dispatch-ref'
+import { buildGitTreeRows } from '../../../state/git-tree'
+import { prepareDiff } from './prepare-diff'
+
+interface PrefetchOptions {
+  projectPath: string | undefined
+  themeId: string
+  headOffset: number
+  enabled: boolean
+}
+
+const MAX_CONCURRENCY = 3
+
+interface Task {
+  key: string
+  file: GitFileEntry
+  distance: number
+  controller: AbortController
+}
+
+class PrefetchQueue {
+  private inflight = new Map<string, AbortController>()
+  private queue: Task[] = []
+  private running = 0
+
+  constructor(
+    private readonly execute: (task: Task) => Promise<void>,
+    private readonly maxConcurrency: number
+  ) {}
+
+  schedule(tasks: Task[]): void {
+    const keepKeys = new Set(tasks.map((t) => t.key))
+    // Cancel inflight + queued tasks that no longer sit inside the prefetch window.
+    for (const [key, controller] of this.inflight) {
+      if (!keepKeys.has(key)) {
+        controller.abort()
+        this.inflight.delete(key)
+      }
+    }
+    this.queue = this.queue.filter((t) => keepKeys.has(t.key))
+    for (const task of tasks) {
+      if (this.inflight.has(task.key)) continue
+      if (this.queue.some((t) => t.key === task.key)) continue
+      this.queue.push(task)
+    }
+    this.queue.sort((a, b) => a.distance - b.distance)
+    this.pump()
+  }
+
+  cancelAll(): void {
+    for (const [, controller] of this.inflight) controller.abort()
+    this.inflight.clear()
+    this.queue = []
+  }
+
+  private pump(): void {
+    while (this.running < this.maxConcurrency && this.queue.length > 0) {
+      const task = this.queue.shift()
+      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()
+      })
+    }
+  }
+}
+
+// Prefetches ±radius neighbours around the selected file so j/k-style navigation
+// hits the cache. Runs through the full pipeline (git → parse → tokenize) off
+// the main thread, bounded to MAX_CONCURRENCY to stay below a crowd of git
+// subprocesses. Cancels tasks that leave the window on each selection change.
+export function useDiffPrefetch(
+  selectedEntryKey: string | null,
+  radius: number,
+  opts: PrefetchOptions
+): void {
+  const files = useAppStore((s) => s.gitPanel.files)
+  const diffs = useAppStore((s) => s.gitMode.diffs)
+  const parsed = useAppStore((s) => s.gitMode.parsedFiles)
+  const loading = useAppStore((s) => s.gitMode.loading)
+  const collapsedFolders = useAppStore((s) => s.gitMode.collapsedFolders)
+  const fileListMode = useAppStore((s) => s.gitPane.fileListMode)
+  const treeCompaction = useAppStore((s) => s.gitPane.treeCompaction)
+
+  const queueRef = useRef<PrefetchQueue | null>(null)
+
+  const { enabled, headOffset, projectPath, themeId } = opts
+  const runTaskRef = useRef<(task: Task) => Promise<void>>(async () => {})
+
+  // Keep a ref to the execute function so the queue keeps the latest closure
+  // without needing to recreate the queue itself.
+  runTaskRef.current = async (task: Task) => {
+    if (!projectPath) return
+    try {
+      const diff = await fetchDiff(projectPath, task.file, headOffset)
+      if (task.controller.signal.aborted) return
+      const hash = diffHash(diff.rawDiff)
+      dispatchGlobal({ diff, hash, key: task.key, type: 'git-mode-set-diff' })
+      const prep = await prepareDiff(diff.rawDiff, task.file.path, {
+        signal: task.controller.signal,
+        themeId,
+      })
+      if (task.controller.signal.aborted) return
+      dispatchGlobal({
+        file: prep.file,
+        hash: prep.hash,
+        key: task.key,
+        type: 'git-mode-set-parsed',
+      })
+      dispatchGlobal({
+        add: prep.highlights.add,
+        del: prep.highlights.del,
+        hash: prep.hash,
+        key: task.key,
+        themeId,
+        type: 'git-mode-set-highlights',
+      })
+    } catch {
+      // Prefetch errors are non-fatal; the foreground fetch will retry on focus.
+    }
+  }
+
+  if (!queueRef.current) {
+    queueRef.current = new PrefetchQueue((task) => runTaskRef.current(task), MAX_CONCURRENCY)
+  }
+
+  useEffect(() => {
+    const queue = queueRef.current
+    if (!queue) return
+    if (!enabled || radius <= 0 || !projectPath || !selectedEntryKey) {
+      queue.cancelAll()
+      return
+    }
+    const { visibleRows } = buildGitTreeRows(files, collapsedFolders, fileListMode, treeCompaction)
+    const fileRows = visibleRows.filter((r) => r.kind === 'file')
+    const selectedIdx = fileRows.findIndex((r) => r.key === selectedEntryKey)
+    if (selectedIdx < 0) {
+      queue.cancelAll()
+      return
+    }
+    const start = Math.max(0, selectedIdx - radius)
+    const end = Math.min(fileRows.length, selectedIdx + radius + 1)
+    const tasks: Task[] = []
+    for (let i = start; i < end; i++) {
+      if (i === selectedIdx) continue
+      const row = fileRows[i]
+      if (!row || row.kind !== 'file') continue
+      const key = row.key
+      if (diffs[key]) continue
+      if (parsed[key]) continue
+      if (loading[key]) continue
+      tasks.push({
+        controller: new AbortController(),
+        distance: Math.abs(i - selectedIdx),
+        file: row.file,
+        key,
+      })
+    }
+    queue.schedule(tasks)
+  }, [
+    enabled,
+    radius,
+    projectPath,
+    selectedEntryKey,
+    files,
+    collapsedFolders,
+    fileListMode,
+    treeCompaction,
+    diffs,
+    parsed,
+    loading,
+    headOffset,
+    themeId,
+  ])
+
+  useEffect(() => {
+    return () => {
+      queueRef.current?.cancelAll()
+    }
+  }, [])
+}

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

@@ -0,0 +1,106 @@
+import type { ThemedToken } from 'shiki'
+
+import { useEffect, useMemo, useState } from 'react'
+
+import type { FileDiffMetadata } from '../../../diff-parser'
+
+import { useAppStore } from '../../../state/app-store'
+import { dispatchGlobal } from '../../../state/dispatch-ref'
+import { getHighlightsTokens, getParsedFile } from '../../../state/types'
+import { prepareDiff } from './prepare-diff'
+
+export interface DiffPreparation {
+  file: FileDiffMetadata | null
+  highlights: { add: ThemedToken[][]; del: ThemedToken[][] }
+  /** True while prepare is running for this cache key + hash. */
+  preparing: boolean
+  /** Available once either cache or prepare has produced a valid hash. */
+  ready: boolean
+}
+
+const EMPTY_HIGHLIGHTS = { add: [] as ThemedToken[][], del: [] as ThemedToken[][] }
+
+// Consults the parsed + highlight caches first, then falls back to an off-thread
+// prepareDiff that dispatches results into the store. Deduplicates in-flight
+// preparation per cacheKey+hash by hashing the diff string once.
+export function useDiffPreparation(
+  cacheKey: string,
+  diff: string,
+  path: string,
+  themeId: string
+): DiffPreparation {
+  const cachedParsed = useAppStore((s) => s.gitMode.parsedFiles[cacheKey])
+  const highlightKey = `${cacheKey}|${themeId}`
+  const cachedHighlights = useAppStore((s) => s.gitMode.highlights[highlightKey])
+
+  const [preparing, setPreparing] = useState(false)
+  const [localFile, setLocalFile] = useState<FileDiffMetadata | null>(null)
+  const [localHighlights, setLocalHighlights] = useState(EMPTY_HIGHLIGHTS)
+  const [localHash, setLocalHash] = useState<string | null>(null)
+
+  const { file, highlights, ready } = useMemo(() => {
+    const parsedFile = cachedParsed ? getParsedFile(cachedParsed) : null
+    const parsedMatches = !!cachedParsed
+    const tokens = cachedHighlights ? getHighlightsTokens(cachedHighlights) : null
+    const hlMatches = !!cachedHighlights && cachedHighlights.hash === cachedParsed?.hash
+
+    if (parsedMatches && hlMatches && tokens) {
+      return { file: parsedFile, highlights: tokens, ready: true }
+    }
+    if (parsedMatches && !hlMatches) {
+      return {
+        file: parsedFile,
+        highlights: tokens ?? EMPTY_HIGHLIGHTS,
+        ready: true,
+      }
+    }
+    if (localHash && localFile) {
+      return { file: localFile, highlights: localHighlights, ready: true }
+    }
+    return { file: null, highlights: EMPTY_HIGHLIGHTS, ready: false }
+  }, [cachedParsed, cachedHighlights, localFile, localHighlights, localHash])
+
+  useEffect(() => {
+    // If caches already cover both parsed and highlights for this theme, bail.
+    const parsedOk = !!cachedParsed
+    const hlOk = !!cachedHighlights && cachedParsed && cachedHighlights.hash === cachedParsed.hash
+    if (parsedOk && hlOk) return
+
+    const controller = new AbortController()
+    setPreparing(true)
+    void prepareDiff(diff, path, { signal: controller.signal, themeId })
+      .then((result) => {
+        if (controller.signal.aborted) return
+        setLocalFile(result.file)
+        setLocalHighlights(result.highlights)
+        setLocalHash(result.hash)
+        dispatchGlobal({
+          file: result.file,
+          hash: result.hash,
+          key: cacheKey,
+          type: 'git-mode-set-parsed',
+        })
+        dispatchGlobal({
+          add: result.highlights.add,
+          del: result.highlights.del,
+          hash: result.hash,
+          key: cacheKey,
+          themeId,
+          type: 'git-mode-set-highlights',
+        })
+      })
+      .catch((err: unknown) => {
+        if (err instanceof Error && err.name === 'AbortError') return
+        // Swallow — the UI falls back to "(could not parse diff)" when file stays null.
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setPreparing(false)
+      })
+
+    return () => {
+      controller.abort()
+    }
+  }, [cacheKey, diff, path, themeId, cachedParsed, cachedHighlights])
+
+  return { file, highlights, preparing, ready }
+}

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

@@ -1,4 +1,4 @@
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
 import { ModalShell } from './modal-shell'
@@ -11,6 +11,7 @@ interface GitCommitModalProps {
 }
 
 export function GitCommitModal({ activeField, body, cursorPos, title }: GitCommitModalProps) {
+  const theme = useTheme()
   const titleActive = activeField === 'title'
   const bodyActive = activeField === 'body'
 

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

@@ -14,6 +14,7 @@ export const GitPaneWidget = memo(function GitPaneWidget({ pollingEnabled }: Git
   const gitPanel = useAppStore((s) => s.gitPanel)
   const gitMode = useAppStore((s) => s.gitMode)
   const gitFileListMode = useAppStore((s) => s.gitPane.fileListMode)
+  const treeCompaction = useAppStore((s) => s.gitPane.treeCompaction)
   const pathConfig = useAppStore((s) => s.gitPane.path)
   const diffCountConfig = useAppStore((s) => s.gitPane.diffCount)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
@@ -23,7 +24,7 @@ export const GitPaneWidget = memo(function GitPaneWidget({ pollingEnabled }: Git
     : undefined
   const projectPath = currentSession?.projectPath
 
-  useGitPanelPolling({ enabled: pollingEnabled, projectPath })
+  useGitPanelPolling({ enabled: pollingEnabled, headOffset: 0, projectPath })
 
   const lastGoodRef = useRef<GitPanelState | null>(null)
   const prevProjectPathRef = useRef(projectPath)
@@ -40,6 +41,7 @@ export const GitPaneWidget = memo(function GitPaneWidget({ pollingEnabled }: Git
   return (
     <GitPanel
       collapsedFolders={gitMode.collapsedFolders}
+      compact={treeCompaction}
       diffCountConfig={diffCountConfig}
       fileListMode={gitFileListMode}
       gitPanel={display}