@brimveyn/aimux 1.12.6 → 1.13.2

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>
@@ -29,13 +29,16 @@ interface GitPanelProps {
   pathConfig?: GitPanePathConfig
   diffCountConfig?: GitPaneDiffCountConfig
   headOffset?: number
+  // When set, the single changed-files section is a worktree fork-point review
+  // ("vs <base>") rather than a HEAD~N history walk.
+  baseLabel?: string
   compact?: boolean
 }
 
-function sectionTitle(section: GitFileSection, headOffset: number): string {
+function sectionTitle(section: GitFileSection, headOffset: number, baseLabel?: string): string {
   switch (section) {
     case 'historical':
-      return `HEAD~${headOffset}`
+      return baseLabel != null && baseLabel !== '' ? baseLabel : `HEAD~${headOffset}`
     case 'staged':
       return 'Staged Changes'
     case 'unstaged':
@@ -105,8 +108,8 @@ function renderFileLabel(
   const displayPath = transform ? transform(file.path) : file.path
   const { basename, prefix } = splitPath(displayPath)
   const dir = stripTrailingSlash(prefix)
-  const showDir = fileListMode === 'flat' && pathConfig.enabled && dir
-  if (!file.renamedFrom) {
+  const showDir = fileListMode === 'flat' && pathConfig.enabled && dir !== ''
+  if (!(file.renamedFrom != null && file.renamedFrom !== '')) {
     return (
       <text selectable={false} wrapMode="none">
         <span fg={t.text}>{basename}</span>
@@ -164,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">
@@ -190,30 +200,43 @@ 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 =
-    fileListMode === 'flat' && file.repoPath ? (repoPrefixes[file.repoPath] ?? '') : ''
+    fileListMode === 'flat' && file.repoPath != null && file.repoPath !== ''
+      ? (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>
@@ -221,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>
@@ -232,32 +255,44 @@ function renderFileRow(
       {renderDiffCount(file, addedW, removedW, bg, diffCountConfig, hasNumstat)}
     </box>
   )
-}
+})
 
-function renderTreeSection(
-  section: GitFileSection,
-  title: string,
-  files: GitFileEntry[],
-  rows: Array<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>
@@ -279,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
@@ -335,8 +373,13 @@ 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,
   collapsedFolders = {},
   compact = false,
   diffCountConfig = DEFAULT_DIFF_COUNT_CONFIG,
@@ -350,7 +393,8 @@ export const GitPanel = memo(function GitPanel({
   const t = useTheme()
   useTransparent()
   const repoPrefixes = useAppStore((s) => s.multiRepo.prefixes)
-  const sectionOrder = headOffset > 0 ? HISTORICAL_SECTION_ORDER : BASE_SECTION_ORDER
+  const isSingleSection = headOffset > 0 || (baseLabel != null && baseLabel !== '')
+  const sectionOrder = isSingleSection ? HISTORICAL_SECTION_ORDER : BASE_SECTION_ORDER
   const scrollRef = useRef<ScrollBoxRenderable | null>(null)
   const tree = useMemo(
     () => buildGitTreeRows(gitPanel.files, collapsedFolders, fileListMode, compact),
@@ -361,7 +405,7 @@ export const GitPanel = memo(function GitPanel({
     [gitPanel.files]
   )
 
-  const statusNode = renderStatus(gitPanel, !!projectPath)
+  const statusNode = renderStatus(gitPanel, !!(projectPath != null && projectPath !== ''))
 
   const hasRemoteTracking = gitPanel.ahead > 0 || gitPanel.behind > 0
   const toggleSection =
@@ -372,7 +416,7 @@ export const GitPanel = memo(function GitPanel({
 
   useEffect(() => {
     const scrollbox = scrollRef.current
-    if (!scrollbox || !selectedEntryKey) return
+    if (!scrollbox || !(selectedEntryKey != null && selectedEntryKey !== '')) return
     const selectedIndex = tree.visibleRows.findIndex((row) => row.key === selectedEntryKey)
     if (selectedIndex < 0) return
     const viewportHeight = Math.max(1, scrollbox.viewport.height)
@@ -392,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),
-              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,16 +1,20 @@
+import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
+
 import { useTerminalDimensions } from '@opentui/react'
-import { memo, useEffect, useRef } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 
 import type { DiffData, GitDiffView } from '../../../state/types'
 import type { ThemeId } from '../../themes'
 
 import { diffHash } from '../../../git/diff-hash'
+import { getMergeBase } from '../../../git/divergence'
 import { fetchDiff } from '../../../git/git-diff'
 import { useGitPanelPolling } from '../../../git/git-poller'
 import { useRepoDiscovery } from '../../../git/use-repo-discovery'
 import { useAppStore } from '../../../state/app-store'
 import { dispatchGlobal } from '../../../state/dispatch-ref'
 import { getSelectedGitFile, gitFileKey } from '../../../state/git-tree'
+import { getActiveWorktree, getSessionProjectPath } from '../../../state/session-worktrees'
 import { setGitDiffScroller } from '../../git-view-controls'
 import { useTheme } from '../../theme'
 import { PierreDiff, type PierreDiffHandle } from './diff-renderer'
@@ -64,7 +68,7 @@ const DiffStage = memo(function DiffStage({
       </box>
     )
   }
-  if (diff.errorMessage) {
+  if (diff.errorMessage != null && diff.errorMessage !== '') {
     return (
       <box flexGrow={1} padding={1}>
         <text fg={t.error}>{diff.errorMessage}</text>
@@ -77,7 +81,7 @@ const DiffStage = memo(function DiffStage({
   }
 
   const placeholder = placeholderText(diff)
-  if (placeholder) {
+  if (placeholder != null && placeholder !== '') {
     return (
       <box flexGrow={1} padding={1}>
         <text fg={t.textMuted}>{placeholder}</text>
@@ -87,7 +91,7 @@ const DiffStage = memo(function DiffStage({
 
   return (
     <box flexDirection="column" flexGrow={1} overflow="hidden">
-      {diff.oldPath ? (
+      {diff.oldPath != null && diff.oldPath !== '' ? (
         <box paddingLeft={1} paddingRight={1}>
           <text fg={t.textMuted}>
             renamed: {diff.oldPath} → {diff.path}
@@ -123,13 +127,42 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
   const focusMode = useAppStore((s) => s.focusMode)
   const diffRef = useRef<PierreDiffHandle | null>(null)
 
-  const currentSession = currentSessionId
-    ? sessions.find((s) => s.id === currentSessionId)
-    : undefined
-  const projectPath = currentSession?.projectPath
+  const currentSession =
+    currentSessionId != null && currentSessionId !== ''
+      ? sessions.find((s) => s.id === currentSessionId)
+      : undefined
+  const projectPath = getSessionProjectPath(currentSession)
+
+  // Review-vs-base: when toggled on for a worktree that records a baseRef,
+  // resolve the fork point and diff the working tree against it.
+  const activeWorktree = getActiveWorktree(currentSession)
+  const reviewBaseRef =
+    gitMode.reviewBase && activeWorktree?.baseRef != null && activeWorktree.baseRef !== ''
+      ? activeWorktree.baseRef
+      : null
+  const [compareRef, setCompareRef] = useState<string | undefined>(undefined)
+  useEffect(() => {
+    if (reviewBaseRef == null || projectPath == null || projectPath === '') {
+      setCompareRef(undefined)
+      return
+    }
+    let cancelled = false
+    void (async () => {
+      const mergeBase = await getMergeBase(projectPath, reviewBaseRef)
+      if (!cancelled) setCompareRef(mergeBase)
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [reviewBaseRef, projectPath])
 
   useRepoDiscovery(projectPath)
-  useGitPanelPolling({ enabled: focusMode === 'git', headOffset: gitMode.headOffset, projectPath })
+  useGitPanelPolling({
+    compareRef,
+    enabled: focusMode === 'git',
+    headOffset: gitMode.headOffset,
+    projectPath,
+  })
 
   const fileBarWidth = Math.max(20, Math.floor(dimensions.width * gitPane.diffModeRatio))
 
@@ -140,8 +173,12 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
     selectedEntryKey: gitMode.selectedEntryKey,
   })
   const selectedDiffKey = selectedFile ? gitFileKey(selectedFile) : null
-  const diff = selectedDiffKey ? gitMode.diffs[selectedDiffKey] : undefined
-  const loading = selectedDiffKey ? !!gitMode.loading[selectedDiffKey] : false
+  const diff =
+    selectedDiffKey != null && selectedDiffKey !== '' ? gitMode.diffs[selectedDiffKey] : undefined
+  const loading =
+    selectedDiffKey != null && selectedDiffKey !== ''
+      ? !!(gitMode.loading[selectedDiffKey] === true)
+      : false
 
   useEffect(() => {
     setGitDiffScroller((delta: number) => {
@@ -160,6 +197,7 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
   }, [])
 
   useDiffPrefetch(gitMode.selectedEntryKey, gitPane.prefetchRadius, {
+    compareRef,
     enabled: focusMode === 'git',
     headOffset: gitMode.headOffset,
     projectPath,
@@ -168,23 +206,38 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
 
   useEffect(() => {
     if (focusMode !== 'git') return
-    if (!selectedFile || !projectPath) return
-    if (!selectedDiffKey) return
+    if (!selectedFile || !(projectPath != null && projectPath !== '')) return
+    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)
-      .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, selectedFile, selectedDiffKey, diff, loading, gitMode.headOffset])
+      }
+    })()
+  }, [
+    focusMode,
+    projectPath,
+    selectedFile,
+    selectedDiffKey,
+    diff,
+    loading,
+    gitMode.headOffset,
+    compareRef,
+  ])
 
   const pendingPath = gitMode.pendingDeletePath
   const pendingIsUntracked =
@@ -199,20 +252,30 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
   }
   const actionMessage = gitMode.actionMessage
   let footerNode: React.ReactNode = null
-  if (pendingHint) {
+  if (pendingHint != null && pendingHint !== '') {
     footerNode = (
       <text fg={t.warning}>
         <strong>{pendingHint}</strong>
       </text>
     )
-  } else if (actionMessage) {
+  } 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>
     ))
   }
 
+  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}>
@@ -228,7 +291,7 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
             <text fg={t.text}>
               <strong>aimux · git</strong>
             </text>
-            {gitPanel.branch ? (
+            {gitPanel.branch != null && gitPanel.branch !== '' ? (
               <box flexDirection="row">
                 <text fg={t.text}>{'\u{e702}'} </text>
                 <text fg={t.text}>{gitPanel.branch}</text>
@@ -242,9 +305,18 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
                 <text fg={t.textMuted}>[ newer · ] older</text>
               </box>
             ) : null}
+            {baseLabel != null ? (
+              <box flexDirection="row" gap={1}>
+                <text fg={t.primary}>
+                  <strong>{baseLabel}</strong>
+                </text>
+                <text fg={t.textMuted}>b: back</text>
+              </box>
+            ) : null}
             <text fg={t.textMuted}>{'·'.repeat(Math.max(0, fileBarWidth - 2))}</text>
           </box>
           <GitPanel
+            baseLabel={baseLabel}
             collapsedFolders={gitMode.collapsedFolders}
             compact={gitPane.treeCompaction}
             fileListMode={gitPane.fileListMode}
@@ -271,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>
@@ -292,7 +360,7 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
           />
         </box>
       </box>
-      {footerNode ? (
+      {footerNode != null ? (
         <box paddingLeft={1} paddingRight={1} backgroundColor={sidebarBg} flexDirection="column">
           {footerNode}
         </box>

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

@@ -76,14 +76,14 @@ export const ImageDiffView = memo(function ImageDiffView({ diff }: ImageDiffView
   const showBoth = before && after
   return (
     <box flexDirection="column" flexGrow={1} overflow="hidden" backgroundColor={t.background}>
-      {diff.oldPath ? (
+      {diff.oldPath != null && diff.oldPath !== '' ? (
         <box paddingLeft={1} paddingRight={1}>
           <text fg={t.textMuted}>
             renamed: {diff.oldPath} → {diff.path}
           </text>
         </box>
       ) : null}
-      {banner ? (
+      {banner != null && banner !== '' ? (
         <box paddingLeft={1} paddingRight={1}>
           <text fg={protocol === 'kitty' ? t.textMuted : t.warning}>{banner}</text>
         </box>

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

@@ -1,5 +1,6 @@
-import { type BoxRenderable } from '@opentui/core'
-import { memo, useEffect, useRef, useState } from 'react'
+import type { BoxRenderable } from '@opentui/core'
+
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 
 import { convertToPng, isPng } from '../../../terminal-graphics/format-fallback'
 import {
@@ -47,7 +48,7 @@ export const TerminalImagePane = memo(function TerminalImagePane({
     let cancelled = false
     stateRef.current = { imageId: null, lastKey: null, uploaded: false }
     setError(null)
-    ;(async () => {
+    void (async () => {
       let pngBytes: Uint8Array | null = null
       if (mime === 'image/png' || isPng(bytes)) {
         pngBytes = bytes
@@ -60,7 +61,7 @@ export const TerminalImagePane = memo(function TerminalImagePane({
         }
         pngBytes = result.png
       }
-      if (cancelled || !pngBytes) return
+      if (cancelled) return
       const id = nextImageId()
       writeRaw(uploadPngEscape(pngBytes, id))
       stateRef.current.imageId = id
@@ -76,15 +77,7 @@ export const TerminalImagePane = memo(function TerminalImagePane({
     }
   }, [bytes, mime])
 
-  if (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}`
@@ -93,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} />