@brimveyn/aimux 1.5.4 → 1.6.1

package/src/ui/components/diff-renderer/highlight.ts

@@ -0,0 +1,48 @@
+import type { ThemedToken } from 'shiki'
+
+import { ensureShikiLang, ensureShikiTheme, getShikiHighlighter } from '../../shiki'
+
+export interface HighlightSpan {
+  bold?: boolean
+  fg?: string
+  italic?: boolean
+  text: string
+  underline?: boolean
+}
+
+// Shiki FontStyle: 1 = italic, 2 = bold, 4 = underline.
+export function tokenToSpan(token: ThemedToken): HighlightSpan {
+  const fs = token.fontStyle ?? 0
+  return {
+    bold: (fs & 2) !== 0 || undefined,
+    fg: token.color,
+    italic: (fs & 1) !== 0 || undefined,
+    text: token.content,
+    underline: (fs & 4) !== 0 || undefined,
+  }
+}
+
+export async function tokenizeSide(
+  lines: string[],
+  lang: string,
+  theme: string
+): Promise<ThemedToken[][]> {
+  if (lines.length === 0) return []
+  const highlighter = await getShikiHighlighter()
+  const [langOk, themeOk] = await Promise.all([
+    ensureShikiLang(highlighter, lang),
+    ensureShikiTheme(highlighter, theme),
+  ])
+  if (!langOk || !themeOk) return []
+  try {
+    const result = highlighter.codeToTokens(lines.join(''), {
+      // eslint-disable-next-line typescript/no-explicit-any
+      lang: lang as any,
+      // eslint-disable-next-line typescript/no-explicit-any
+      theme: theme as any,
+    })
+    return result.tokens
+  } catch {
+    return []
+  }
+}

package/src/ui/components/diff-renderer/index.ts

@@ -0,0 +1 @@
+export { type DiffView, PierreDiff, type PierreDiffHandle } from './pierre-diff'

package/src/ui/components/diff-renderer/pierre-diff.tsx

@@ -0,0 +1,171 @@
+import type { ScrollBoxRenderable } from '@opentui/core'
+import type { ThemedToken } from 'shiki'
+
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+
+import type { FoldState } from '../../../state/types'
+import type { ThemeId } from '../../themes'
+
+import { parsePatchFiles } from '../../../diff-parser'
+import { useAppStore } from '../../../state/app-store'
+import { dispatchGlobal } from '../../../state/dispatch-ref'
+import { useTheme } from '../../theme'
+import { buildSplitRows, buildUnifiedRows, firstChangeRowOffset, gutterWidth } from './build-rows'
+import { filetypeFromPath } from './filetype'
+import { tokenizeSide } from './highlight'
+import { SplitView, type SplitViewHandle } from './split-view'
+import { StackedView, type StackedViewHandle } from './stacked-view'
+
+export type DiffView = 'split' | 'stacked'
+
+export interface PierreDiffHandle {
+  leftScroll: ScrollBoxRenderable | null
+  rightScroll: ScrollBoxRenderable | null
+}
+
+export interface DiffHighlights {
+  add: ThemedToken[][]
+  del: ThemedToken[][]
+}
+
+export interface FoldDispatch {
+  adjust: (foldId: string, side: 'top' | 'bottom', delta: number) => void
+  set: (foldId: string, top: number, bottom: number) => void
+}
+
+interface Props {
+  cacheKey: string
+  diff: string
+  path: string
+  themeId: ThemeId
+  view: DiffView
+}
+
+const EMPTY_HIGHLIGHTS: DiffHighlights = { add: [], del: [] }
+const EMPTY_FOLDS: Record<string, FoldState> = {}
+
+export const PierreDiff = forwardRef<PierreDiffHandle, Props>(function PierreDiff(
+  { cacheKey, diff, path, themeId, view },
+  ref
+) {
+  const theme = useTheme()
+  const file = useMemo(() => {
+    const patches = parsePatchFiles(diff)
+    return patches[0]?.files[0]
+  }, [diff])
+
+  const filetype = useMemo(() => filetypeFromPath(path), [path])
+
+  const terminalCols = useAppStore((s) => s.layout.terminalCols)
+  const sidebarWidth = useAppStore((s) => s.sidebar.width)
+  const contentWidth = useMemo(() => {
+    if (!file) return 0
+    const gw = gutterWidth(file)
+    const usable = Math.max(0, terminalCols - sidebarWidth - 1)
+    const paneCols = view === 'split' ? Math.max(0, Math.floor(usable / 2) - 1) : usable
+    const prefix = view === 'split' ? gw + 4 : gw * 2 + 5
+    return Math.max(1, paneCols - prefix)
+  }, [file, view, terminalCols, sidebarWidth])
+
+  const folds = useAppStore((s) => s.gitMode.folds[cacheKey]) ?? EMPTY_FOLDS
+  const foldDispatch = useMemo<FoldDispatch>(
+    () => ({
+      adjust: (foldId, side, delta) =>
+        dispatchGlobal({ delta, foldId, key: cacheKey, side, type: 'git-mode-fold-adjust' }),
+      set: (foldId, top, bottom) =>
+        dispatchGlobal({ bottom, foldId, key: cacheKey, top, type: 'git-mode-fold-set' }),
+    }),
+    [cacheKey]
+  )
+
+  const [highlights, setHighlights] = useState<DiffHighlights>(EMPTY_HIGHLIGHTS)
+
+  useEffect(() => {
+    setHighlights(EMPTY_HIGHLIGHTS)
+    if (!file || !filetype) return
+    let cancelled = false
+    void Promise.all([
+      tokenizeSide(file.additionLines, filetype, themeId),
+      tokenizeSide(file.deletionLines, filetype, themeId),
+    ]).then(([add, del]) => {
+      if (cancelled) return
+      setHighlights({ add, del })
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [file, filetype, themeId])
+
+  const splitRef = useRef<SplitViewHandle | null>(null)
+  const stackedRef = useRef<StackedViewHandle | null>(null)
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      get leftScroll() {
+        if (view === 'split') return splitRef.current?.leftScroll ?? null
+        return stackedRef.current?.scroll ?? null
+      },
+      get rightScroll() {
+        if (view === 'split') return splitRef.current?.rightScroll ?? null
+        return stackedRef.current?.scroll ?? null
+      },
+    }),
+    [view]
+  )
+
+  useEffect(() => {
+    if (!file) return
+    const rows =
+      view === 'split'
+        ? buildSplitRows(file, EMPTY_FOLDS, contentWidth)
+        : buildUnifiedRows(file, EMPTY_FOLDS, contentWidth)
+    const offset = firstChangeRowOffset(rows)
+    if (offset < 0) return
+    const target = Math.max(0, offset - 2)
+    const apply = (): void => {
+      if (view === 'split') {
+        const left = splitRef.current?.leftScroll
+        const right = splitRef.current?.rightScroll
+        if (left) left.scrollTop = target
+        if (right && right !== left) right.scrollTop = target
+      } else {
+        const node = stackedRef.current?.scroll
+        if (node) node.scrollTop = target
+      }
+    }
+    const raf = requestAnimationFrame(apply)
+    return () => cancelAnimationFrame(raf)
+  }, [cacheKey, file, view, contentWidth])
+
+  if (!file) {
+    return (
+      <box flexGrow={1} padding={1}>
+        <text fg={theme.colors['descriptionForeground']}>(could not parse diff)</text>
+      </box>
+    )
+  }
+
+  if (view === 'stacked') {
+    return (
+      <StackedView
+        ref={stackedRef}
+        contentWidth={contentWidth}
+        file={file}
+        foldDispatch={foldDispatch}
+        folds={folds}
+        highlights={highlights}
+      />
+    )
+  }
+  return (
+    <SplitView
+      ref={splitRef}
+      contentWidth={contentWidth}
+      file={file}
+      foldDispatch={foldDispatch}
+      folds={folds}
+      highlights={highlights}
+    />
+  )
+})

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

@@ -0,0 +1,211 @@
+import type { ThemedToken } from 'shiki'
+
+import {
+  type MouseEvent as OtuiMouseEvent,
+  type ScrollBoxRenderable,
+  TextAttributes,
+} from '@opentui/core'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+
+import type { FileDiffMetadata } from '../../../diff-parser'
+import type { FoldState } from '../../../state/types'
+import type { DiffHighlights, FoldDispatch } from './pierre-diff'
+
+import { getScrollViewportDelta } from '../../../app-runtime/terminal-mouse-adapter'
+import { scrollGitDiff } from '../../git-view-controls'
+import { useTheme } from '../../theme'
+import { buildSplitRows, gutterWidth, type SplitCell, type SplitRowOrHeader } from './build-rows'
+import { FoldStrip } from './fold-strip'
+import { tokenToSpan } from './highlight'
+
+export interface SplitViewHandle {
+  leftScroll: ScrollBoxRenderable | null
+  rightScroll: ScrollBoxRenderable | null
+}
+
+interface Props {
+  file: FileDiffMetadata
+  highlights: DiffHighlights
+  folds: Record<string, FoldState>
+  foldDispatch: FoldDispatch
+  contentWidth: number
+}
+
+function handleScroll(e: OtuiMouseEvent): void {
+  const delta = getScrollViewportDelta(e)
+  if (delta === null) return
+  e.preventDefault()
+  e.stopPropagation()
+  scrollGitDiff(delta)
+}
+
+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)
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      get leftScroll() {
+        return leftRef.current
+      },
+      get rightScroll() {
+        return rightRef.current
+      },
+    }),
+    []
+  )
+
+  const rows = buildSplitRows(file, folds, contentWidth)
+  const gw = gutterWidth(file)
+
+  return (
+    <box flexDirection="row" flexGrow={1} overflow="hidden" onMouseScroll={handleScroll}>
+      <scrollbox
+        ref={leftRef}
+        flexGrow={1}
+        scrollY
+        viewportCulling
+        contentOptions={{ flexDirection: 'column', gap: 0 }}
+        verticalScrollbarOptions={{ visible: false }}
+        onMouseScroll={handleScroll}
+      >
+        {rows.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}
+          />
+        ))}
+      </scrollbox>
+      <box width={1} backgroundColor={theme.colors['editor.background']} />
+      <scrollbox
+        ref={rightRef}
+        flexGrow={1}
+        scrollY
+        viewportCulling
+        contentOptions={{ flexDirection: 'column', gap: 0 }}
+        onMouseScroll={handleScroll}
+      >
+        {rows.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}
+          />
+        ))}
+      </scrollbox>
+    </box>
+  )
+})
+
+function SideRow({
+  cell,
+  foldDispatch,
+  gw,
+  header,
+  rowHeight,
+  tokens,
+}: {
+  cell: SplitCell | null
+  foldDispatch: FoldDispatch
+  gw: number
+  header: Extract<SplitRowOrHeader, { type: 'hunk-header' }> | null
+  rowHeight: number
+  tokens: ThemedToken[][]
+}) {
+  if (header) return <HunkHeaderRow row={header} />
+  if (!cell) return null
+  if (cell.type === 'fold') return <FoldStrip dispatch={foldDispatch} fold={cell.fold} />
+  return <HalfRow cell={cell} gw={gw} height={rowHeight} tokens={tokens} />
+}
+
+function HunkHeaderRow({ row }: { row: Extract<SplitRowOrHeader, { type: 'hunk-header' }> }) {
+  const theme = useTheme()
+  return (
+    <box
+      flexDirection="row"
+      backgroundColor={theme.colors['sideBarSectionHeader.background']}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <text fg={theme.colors['descriptionForeground']}>{row.spec}</text>
+      {row.context ? (
+        <text fg={theme.colors['editor.lineHighlightBackground']}> {row.context}</text>
+      ) : null}
+    </box>
+  )
+}
+
+function HalfRow({
+  cell,
+  gw,
+  height,
+  tokens,
+}: {
+  cell: Exclude<SplitCell, { type: 'fold' }>
+  gw: number
+  height: number
+  tokens: ThemedToken[][]
+}) {
+  const theme = useTheme()
+  if (cell.type === 'filler') {
+    return <box backgroundColor={theme.colors['sideBarSectionHeader.background']} height={height} />
+  }
+  let bg: string | undefined
+  let sign = ' '
+  let signColor = theme.colors['descriptionForeground']
+  if (cell.type === 'addition') {
+    bg = theme.colors['diffEditor.insertedLineBackground']
+    sign = '+'
+    signColor = theme.colors['gitDecoration.addedResourceForeground']
+  } else if (cell.type === 'deletion') {
+    bg = theme.colors['diffEditor.removedLineBackground']
+    sign = '-'
+    signColor = theme.colors['editorError.foreground']
+  }
+  const num = String(cell.lineNumber).padStart(gw, ' ')
+  const lineTokens = tokens[cell.lineIdx]
+  return (
+    <box flexDirection="row" backgroundColor={bg} height={height}>
+      <text fg={theme.colors['descriptionForeground']}>{` ${num} `}</text>
+      <text fg={signColor}>{`${sign} `}</text>
+      <LineContent content={cell.content} tokens={lineTokens} />
+    </box>
+  )
+}
+
+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>
+  }
+  return (
+    <text>
+      {tokens.map((t, i) => {
+        const s = tokenToSpan(t)
+        let attributes = 0
+        if (s.bold) attributes |= TextAttributes.BOLD
+        if (s.italic) attributes |= TextAttributes.ITALIC
+        if (s.underline) attributes |= TextAttributes.UNDERLINE
+        return (
+          <span key={i} fg={s.fg ?? theme.colors['editor.foreground']} attributes={attributes}>
+            {s.text}
+          </span>
+        )
+      })}
+    </text>
+  )
+}

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

@@ -0,0 +1,168 @@
+import type { ThemedToken } from 'shiki'
+
+import {
+  type MouseEvent as OtuiMouseEvent,
+  type ScrollBoxRenderable,
+  TextAttributes,
+} from '@opentui/core'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+
+import type { FileDiffMetadata } from '../../../diff-parser'
+import type { FoldState } from '../../../state/types'
+import type { DiffHighlights, FoldDispatch } from './pierre-diff'
+
+import { getScrollViewportDelta } from '../../../app-runtime/terminal-mouse-adapter'
+import { scrollGitDiff } from '../../git-view-controls'
+import { useTheme } from '../../theme'
+import { buildUnifiedRows, gutterWidth, type UnifiedRowOrHeader } from './build-rows'
+import { FoldStrip } from './fold-strip'
+import { tokenToSpan } from './highlight'
+
+export interface StackedViewHandle {
+  scroll: ScrollBoxRenderable | null
+}
+
+interface Props {
+  file: FileDiffMetadata
+  highlights: DiffHighlights
+  folds: Record<string, FoldState>
+  foldDispatch: FoldDispatch
+  contentWidth: number
+}
+
+function handleScroll(e: OtuiMouseEvent): void {
+  const delta = getScrollViewportDelta(e)
+  if (delta === null) return
+  e.preventDefault()
+  e.stopPropagation()
+  scrollGitDiff(delta)
+}
+
+export const StackedView = forwardRef<StackedViewHandle, Props>(function StackedView(
+  { contentWidth, file, foldDispatch, folds, highlights },
+  ref
+) {
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      get scroll() {
+        return scrollRef.current
+      },
+    }),
+    []
+  )
+
+  const rows = buildUnifiedRows(file, folds, contentWidth)
+  const gw = gutterWidth(file)
+
+  return (
+    <scrollbox
+      ref={scrollRef}
+      flexGrow={1}
+      scrollY
+      viewportCulling
+      contentOptions={{ flexDirection: 'column', gap: 0 }}
+      onMouseScroll={handleScroll}
+    >
+      {rows.map((row, i) => (
+        <UnifiedRowRender
+          key={i}
+          foldDispatch={foldDispatch}
+          gw={gw}
+          highlights={highlights}
+          row={row}
+        />
+      ))}
+    </scrollbox>
+  )
+})
+
+function UnifiedRowRender({
+  foldDispatch,
+  gw,
+  highlights,
+  row,
+}: {
+  foldDispatch: FoldDispatch
+  gw: number
+  highlights: DiffHighlights
+  row: UnifiedRowOrHeader
+}) {
+  const theme = useTheme()
+  if (row.type === 'hunk-header') {
+    return (
+      <box
+        flexDirection="row"
+        backgroundColor={theme.colors['sideBarSectionHeader.background']}
+        paddingLeft={1}
+        paddingRight={1}
+      >
+        <text fg={theme.colors['descriptionForeground']}>{row.spec}</text>
+        {row.context ? (
+          <text fg={theme.colors['editor.lineHighlightBackground']}> {row.context}</text>
+        ) : null}
+      </box>
+    )
+  }
+  if (row.type === 'fold') {
+    return <FoldStrip dispatch={foldDispatch} fold={row.fold} />
+  }
+  const pad = (n: number | undefined): string =>
+    n === undefined ? ' '.repeat(gw) : String(n).padStart(gw, ' ')
+  if (row.type === 'context') {
+    const tokens = highlights.add[row.lineIdx]
+    return (
+      <box flexDirection="row" height={row.height}>
+        <text
+          fg={theme.colors['descriptionForeground']}
+        >{` ${pad(row.delLineNumber)} ${pad(row.addLineNumber)} `}</text>
+        <text fg={theme.colors['editor.foreground']}> </text>
+        <LineContent content={row.content} tokens={tokens} />
+      </box>
+    )
+  }
+  const bg =
+    row.type === 'addition'
+      ? theme.colors['diffEditor.insertedLineBackground']
+      : theme.colors['diffEditor.removedLineBackground']
+  const sign = row.type === 'addition' ? '+' : '-'
+  const signColor =
+    row.type === 'addition'
+      ? theme.colors['gitDecoration.addedResourceForeground']
+      : theme.colors['editorError.foreground']
+  const delNum = row.type === 'deletion' ? row.lineNumber : undefined
+  const addNum = row.type === 'addition' ? row.lineNumber : undefined
+  const tokens = row.type === 'addition' ? highlights.add[row.lineIdx] : highlights.del[row.lineIdx]
+  return (
+    <box flexDirection="row" backgroundColor={bg} height={row.height}>
+      <text fg={theme.colors['descriptionForeground']}>{` ${pad(delNum)} ${pad(addNum)} `}</text>
+      <text fg={signColor}>{`${sign} `}</text>
+      <LineContent content={row.content} tokens={tokens} />
+    </box>
+  )
+}
+
+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>
+  }
+  return (
+    <text>
+      {tokens.map((t, i) => {
+        const s = tokenToSpan(t)
+        let attributes = 0
+        if (s.bold) attributes |= TextAttributes.BOLD
+        if (s.italic) attributes |= TextAttributes.ITALIC
+        if (s.underline) attributes |= TextAttributes.UNDERLINE
+        return (
+          <span key={i} fg={s.fg ?? theme.colors['editor.foreground']} attributes={attributes}>
+            {s.text}
+          </span>
+        )
+      })}
+    </text>
+  )
+}

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,13 +11,20 @@ interface GitCommitModalProps {
 }
 
 export function GitCommitModal({ activeField, body, cursorPos, title }: GitCommitModalProps) {
+  const theme = useTheme()
   const titleActive = activeField === 'title'
   const bodyActive = activeField === 'body'
 
   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 +33,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)
@@ -21,7 +23,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)
@@ -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}
     />
   )
 })