@brimveyn/aimux 1.8.0 → 1.9.1

package/src/ui/components/git/diff-renderer/prepare-diff.ts

@@ -0,0 +1,62 @@
+import type { ThemedToken } from 'shiki'
+
+import { type FileDiffMetadata, parsePatchFiles } from '../../../../diff-parser'
+import { diffHash } from '../../../../git/diff-hash'
+import { buildDiffSegments, type DiffSegment } from './build-rows'
+import { filetypeFromPath } from './filetype'
+
+export interface PreparedParsedDiff {
+  file: FileDiffMetadata | null
+  filetype: string | null
+  firstChangeOffset: number
+  segments: DiffSegment[]
+}
+
+export interface PreparedDiff {
+  hash: string
+  parsed: PreparedParsedDiff
+  highlights: { add: ThemedToken[][]; del: ThemedToken[][] }
+}
+
+interface PrepareOptions {
+  signal?: AbortSignal
+}
+
+function yieldToEventLoop(): Promise<void> {
+  return new Promise((resolve) => {
+    setImmediate(resolve)
+  })
+}
+
+function throwIfAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) throw new DOMException('Aborted', 'AbortError')
+}
+
+// Lifts diff parsing off the synchronous render tree and returns a segmented
+// model immediately. Syntax highlighting is requested later for visible
+// segments so first paint is not blocked on full-file tokenization.
+export async function prepareDiff(
+  diff: string,
+  path: string,
+  opts: PrepareOptions
+): Promise<PreparedDiff> {
+  const hash = diffHash(diff)
+  throwIfAborted(opts.signal)
+  await yieldToEventLoop()
+  throwIfAborted(opts.signal)
+  const patches = parsePatchFiles(diff)
+  const files = patches.flatMap((patch) => patch.files)
+  const file = files.length === 1 ? (files[0] ?? null) : null
+  const filetype = file ? (filetypeFromPath(path) ?? null) : null
+  const segmented = file ? buildDiffSegments(file) : { firstChangeOffset: -1, segments: [] }
+  return {
+    hash,
+    highlights: { add: [], del: [] },
+    parsed: {
+      file,
+      filetype,
+      firstChangeOffset: segmented.firstChangeOffset,
+      segments: segmented.segments,
+    },
+  }
+}

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

@@ -5,20 +5,35 @@ import {
   type ScrollBoxRenderable,
   TextAttributes,
 } from '@opentui/core'
-import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react'
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 
-import type { FileDiffMetadata } from '../../../diff-parser'
-import type { FoldState } from '../../../state/types'
+import type { FileDiffMetadata } from '../../../../diff-parser'
 import type { DiffHighlights, FoldDispatch } from './pierre-diff'
 
-import { getScrollViewportDelta } from '../../../app-runtime/terminal-mouse-adapter'
-import { scrollGitDiff } from '../../git-view-controls'
-import { useBg, useTokens, useTransparent } from '../../theme'
-import { buildSplitRows, gutterWidth, type SplitCell, type SplitRowOrHeader } from './build-rows'
+import { getScrollViewportDelta } from '../../../../app-runtime/terminal-mouse-adapter'
+import { scrollGitDiff } from '../../../git-view-controls'
+import { useBg, useTokens, useTransparent } from '../../../theme'
+import {
+  type DiffSegment,
+  estimatedSegmentHeight,
+  expandSplitSegment,
+  gutterWidth,
+  type SplitCell,
+  type SplitRowOrHeader,
+} from './build-rows'
 import { FoldStrip } from './fold-strip'
 import { tokenToSpan } from './highlight'
+import { useSegmentVirtualization } from './use-segment-virtualization'
 
-const LARGE_ROW_CAP = 5000
+const OVERSCAN = 24
 
 export interface SplitViewHandle {
   leftScroll: ScrollBoxRenderable | null
@@ -28,9 +43,16 @@ export interface SplitViewHandle {
 interface Props {
   file: FileDiffMetadata
   highlights: DiffHighlights
-  folds: Record<string, FoldState>
   foldDispatch: FoldDispatch
   contentWidth: number
+  requestSegmentHighlights: (segments: readonly DiffSegment[]) => void
+  segments: DiffSegment[]
+}
+
+interface RenderedSegment {
+  exactHeight: number
+  rows: SplitRowOrHeader[]
+  segment: DiffSegment
 }
 
 function handleScroll(e: OtuiMouseEvent): void {
@@ -42,12 +64,15 @@ function handleScroll(e: OtuiMouseEvent): void {
 }
 
 export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
-  { contentWidth, file, foldDispatch, folds, highlights },
+  { contentWidth, file, foldDispatch, highlights, requestSegmentHighlights, segments },
   ref
 ) {
   const separatorBg = useBg('base')
   const leftRef = useRef<ScrollBoxRenderable | null>(null)
   const rightRef = useRef<ScrollBoxRenderable | null>(null)
+  const measuredHeightsRef = useRef<Record<string, number>>({})
+  const commitFrameRef = useRef(0)
+  const [measurementVersion, setMeasurementVersion] = useState(0)
 
   useImperativeHandle(
     ref,
@@ -62,10 +87,64 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
     []
   )
 
-  const rows = useMemo(() => buildSplitRows(file, folds, contentWidth), [file, folds, contentWidth])
+  useEffect(() => {
+    cancelAnimationFrame(commitFrameRef.current)
+    if (Object.keys(measuredHeightsRef.current).length === 0) return
+    measuredHeightsRef.current = {}
+    setMeasurementVersion((version) => version + 1)
+  }, [contentWidth, file])
+
+  useEffect(() => {
+    return () => cancelAnimationFrame(commitFrameRef.current)
+  }, [])
+
+  const estimateHeight = useCallback(
+    (segment: DiffSegment) =>
+      measuredHeightsRef.current[segment.id] ?? estimatedSegmentHeight(segment, 'split'),
+    []
+  )
+
+  const visibleWindow = useSegmentVirtualization({
+    estimateHeight,
+    overscan: OVERSCAN,
+    scrollRef: leftRef,
+    segments,
+    version: measurementVersion,
+  })
+
+  const renderedSegments = useMemo<RenderedSegment[]>(() => {
+    return visibleWindow.visible.map((segment) => {
+      const rows = expandSplitSegment(file, segment, contentWidth)
+      return {
+        exactHeight: rows.reduce((sum, row) => sum + (row.type === 'row' ? row.height : 1), 0),
+        rows,
+        segment,
+      }
+    })
+  }, [contentWidth, file, visibleWindow.visible])
+
+  useEffect(() => {
+    requestSegmentHighlights(visibleWindow.visible)
+  }, [requestSegmentHighlights, visibleWindow.visible])
+
+  useEffect(() => {
+    if (renderedSegments.length === 0) return
+    let changed = false
+    const next = { ...measuredHeightsRef.current }
+    for (const rendered of renderedSegments) {
+      if (next[rendered.segment.id] === rendered.exactHeight) continue
+      next[rendered.segment.id] = rendered.exactHeight
+      changed = true
+    }
+    if (!changed) return
+    measuredHeightsRef.current = next
+    cancelAnimationFrame(commitFrameRef.current)
+    commitFrameRef.current = requestAnimationFrame(() => {
+      setMeasurementVersion((version) => version + 1)
+    })
+  }, [renderedSegments])
+
   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}>
@@ -78,18 +157,21 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
         verticalScrollbarOptions={{ visible: false }}
         onMouseScroll={handleScroll}
       >
-        {displayRows.map((row, i) => (
-          <SideRow
-            key={i}
-            cell={row.type === 'row' ? row.left : null}
-            foldDispatch={foldDispatch}
-            gw={gw}
-            header={row.type === 'hunk-header' ? row : null}
-            rowHeight={row.type === 'row' ? row.height : 1}
-            tokens={highlights.del}
-          />
-        ))}
-        {truncated ? <TruncationNotice hidden={rows.length - displayRows.length} /> : null}
+        {visibleWindow.topSpacer > 0 ? <box height={visibleWindow.topSpacer} /> : null}
+        {renderedSegments.map((rendered) =>
+          rendered.rows.map((row, i) => (
+            <SideRow
+              key={`${rendered.segment.id}:left:${i}`}
+              cell={row.type === 'row' ? row.left : null}
+              foldDispatch={foldDispatch}
+              gw={gw}
+              header={row.type === 'hunk-header' ? row : null}
+              rowHeight={row.type === 'row' ? row.height : 1}
+              tokens={highlights.del}
+            />
+          ))
+        )}
+        {visibleWindow.bottomSpacer > 0 ? <box height={visibleWindow.bottomSpacer} /> : null}
       </scrollbox>
       <box width={1} backgroundColor={separatorBg} />
       <scrollbox
@@ -100,33 +182,26 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
         contentOptions={{ flexDirection: 'column', gap: 0 }}
         onMouseScroll={handleScroll}
       >
-        {displayRows.map((row, i) => (
-          <SideRow
-            key={i}
-            cell={row.type === 'row' ? row.right : null}
-            foldDispatch={foldDispatch}
-            gw={gw}
-            header={row.type === 'hunk-header' ? row : null}
-            rowHeight={row.type === 'row' ? row.height : 1}
-            tokens={highlights.add}
-          />
-        ))}
-        {truncated ? <TruncationNotice hidden={rows.length - displayRows.length} /> : null}
+        {visibleWindow.topSpacer > 0 ? <box height={visibleWindow.topSpacer} /> : null}
+        {renderedSegments.map((rendered) =>
+          rendered.rows.map((row, i) => (
+            <SideRow
+              key={`${rendered.segment.id}:right:${i}`}
+              cell={row.type === 'row' ? row.right : null}
+              foldDispatch={foldDispatch}
+              gw={gw}
+              header={row.type === 'hunk-header' ? row : null}
+              rowHeight={row.type === 'row' ? row.height : 1}
+              tokens={highlights.add}
+            />
+          ))
+        )}
+        {visibleWindow.bottomSpacer > 0 ? <box height={visibleWindow.bottomSpacer} /> : null}
       </scrollbox>
     </box>
   )
 })
 
-function TruncationNotice({ hidden }: { hidden: number }) {
-  const t = useTokens()
-  const headerBg = useBg('elevated')
-  return (
-    <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-      <text fg={t.palette.warning}>…diff truncated — {hidden} more rows hidden</text>
-    </box>
-  )
-}
-
 function SideRow({
   cell,
   foldDispatch,

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

@@ -5,20 +5,34 @@ import {
   type ScrollBoxRenderable,
   TextAttributes,
 } from '@opentui/core'
-import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react'
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 
-import type { FileDiffMetadata } from '../../../diff-parser'
-import type { FoldState } from '../../../state/types'
+import type { FileDiffMetadata } from '../../../../diff-parser'
 import type { DiffHighlights, FoldDispatch } from './pierre-diff'
 
-import { getScrollViewportDelta } from '../../../app-runtime/terminal-mouse-adapter'
-import { scrollGitDiff } from '../../git-view-controls'
-import { useBg, useTokens, useTransparent } from '../../theme'
-import { buildUnifiedRows, gutterWidth, type UnifiedRowOrHeader } from './build-rows'
+import { getScrollViewportDelta } from '../../../../app-runtime/terminal-mouse-adapter'
+import { scrollGitDiff } from '../../../git-view-controls'
+import { useBg, useTokens, useTransparent } from '../../../theme'
+import {
+  type DiffSegment,
+  estimatedSegmentHeight,
+  expandUnifiedSegment,
+  gutterWidth,
+  type UnifiedRowOrHeader,
+} from './build-rows'
 import { FoldStrip } from './fold-strip'
 import { tokenToSpan } from './highlight'
+import { useSegmentVirtualization } from './use-segment-virtualization'
 
-const LARGE_ROW_CAP = 5000
+const OVERSCAN = 24
 
 export interface StackedViewHandle {
   scroll: ScrollBoxRenderable | null
@@ -27,9 +41,16 @@ export interface StackedViewHandle {
 interface Props {
   file: FileDiffMetadata
   highlights: DiffHighlights
-  folds: Record<string, FoldState>
   foldDispatch: FoldDispatch
   contentWidth: number
+  requestSegmentHighlights: (segments: readonly DiffSegment[]) => void
+  segments: DiffSegment[]
+}
+
+interface RenderedSegment {
+  exactHeight: number
+  rows: UnifiedRowOrHeader[]
+  segment: DiffSegment
 }
 
 function handleScroll(e: OtuiMouseEvent): void {
@@ -41,10 +62,13 @@ function handleScroll(e: OtuiMouseEvent): void {
 }
 
 export const StackedView = forwardRef<StackedViewHandle, Props>(function StackedView(
-  { contentWidth, file, foldDispatch, folds, highlights },
+  { contentWidth, file, foldDispatch, highlights, requestSegmentHighlights, segments },
   ref
 ) {
   const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+  const measuredHeightsRef = useRef<Record<string, number>>({})
+  const commitFrameRef = useRef(0)
+  const [measurementVersion, setMeasurementVersion] = useState(0)
 
   useImperativeHandle(
     ref,
@@ -56,13 +80,67 @@ export const StackedView = forwardRef<StackedViewHandle, Props>(function Stacked
     []
   )
 
-  const rows = useMemo(
-    () => buildUnifiedRows(file, folds, contentWidth),
-    [file, folds, contentWidth]
+  useEffect(() => {
+    cancelAnimationFrame(commitFrameRef.current)
+    if (Object.keys(measuredHeightsRef.current).length === 0) return
+    measuredHeightsRef.current = {}
+    setMeasurementVersion((version) => version + 1)
+  }, [contentWidth, file])
+
+  useEffect(() => {
+    return () => cancelAnimationFrame(commitFrameRef.current)
+  }, [])
+
+  const estimateHeight = useCallback(
+    (segment: DiffSegment) =>
+      measuredHeightsRef.current[segment.id] ?? estimatedSegmentHeight(segment, 'stacked'),
+    []
   )
+
+  const visibleWindow = useSegmentVirtualization({
+    estimateHeight,
+    overscan: OVERSCAN,
+    scrollRef,
+    segments,
+    version: measurementVersion,
+  })
+
+  const renderedSegments = useMemo<RenderedSegment[]>(() => {
+    return visibleWindow.visible.map((segment) => {
+      const rows = expandUnifiedSegment(file, segment, contentWidth)
+      return {
+        exactHeight: rows.reduce(
+          (sum, row) => sum + (row.type === 'hunk-header' || row.type === 'fold' ? 1 : row.height),
+          0
+        ),
+        rows,
+        segment,
+      }
+    })
+  }, [contentWidth, file, visibleWindow.visible])
+
+  useEffect(() => {
+    requestSegmentHighlights(visibleWindow.visible)
+  }, [requestSegmentHighlights, visibleWindow.visible])
+
+  useEffect(() => {
+    if (renderedSegments.length === 0) return
+    let changed = false
+    const next = { ...measuredHeightsRef.current }
+    for (const rendered of renderedSegments) {
+      if (next[rendered.segment.id] === rendered.exactHeight) continue
+      next[rendered.segment.id] = rendered.exactHeight
+      changed = true
+    }
+    if (!changed) return
+    measuredHeightsRef.current = next
+    cancelAnimationFrame(commitFrameRef.current)
+    commitFrameRef.current = requestAnimationFrame(() => {
+      setMeasurementVersion((version) => version + 1)
+    })
+  }, [renderedSegments])
+
   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
@@ -73,30 +151,23 @@ export const StackedView = forwardRef<StackedViewHandle, Props>(function Stacked
       contentOptions={{ flexDirection: 'column', gap: 0 }}
       onMouseScroll={handleScroll}
     >
-      {displayRows.map((row, i) => (
-        <UnifiedRowRender
-          key={i}
-          foldDispatch={foldDispatch}
-          gw={gw}
-          highlights={highlights}
-          row={row}
-        />
-      ))}
-      {truncated ? <TruncationNotice hidden={rows.length - displayRows.length} /> : null}
+      {visibleWindow.topSpacer > 0 ? <box height={visibleWindow.topSpacer} /> : null}
+      {renderedSegments.map((rendered) =>
+        rendered.rows.map((row, i) => (
+          <UnifiedRowRender
+            key={`${rendered.segment.id}:${i}`}
+            foldDispatch={foldDispatch}
+            gw={gw}
+            highlights={highlights}
+            row={row}
+          />
+        ))
+      )}
+      {visibleWindow.bottomSpacer > 0 ? <box height={visibleWindow.bottomSpacer} /> : null}
     </scrollbox>
   )
 })
 
-function TruncationNotice({ hidden }: { hidden: number }) {
-  const t = useTokens()
-  const headerBg = useBg('elevated')
-  return (
-    <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-      <text fg={t.palette.warning}>…diff truncated — {hidden} more rows hidden</text>
-    </box>
-  )
-}
-
 function UnifiedRowRender({
   foldDispatch,
   gw,

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

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from 'react'
 
-import type { GitFileEntry } from '../../../state/types'
+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 { 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 {
@@ -94,7 +94,7 @@ export function useDiffPrefetch(
 
   const queueRef = useRef<PrefetchQueue | null>(null)
 
-  const { enabled, headOffset, projectPath, themeId } = opts
+  const { enabled, headOffset, projectPath } = opts
   const runTaskRef = useRef<(task: Task) => Promise<void>>(async () => {})
 
   // Keep a ref to the execute function so the queue keeps the latest closure
@@ -111,19 +111,11 @@ export function useDiffPrefetch(
       })
       if (task.controller.signal.aborted) return
       dispatchGlobal({
-        file: prep.file,
+        file: prep.parsed,
         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.
     }
@@ -179,7 +171,6 @@ export function useDiffPrefetch(
     parsed,
     loading,
     headOffset,
-    themeId,
   ])
 
   useEffect(() => {