@brimveyn/aimux 1.5.4 → 1.6.0

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

@@ -0,0 +1,29 @@
+const EXT_TO_SHIKI: Record<string, string> = {
+  cjs: 'javascript',
+  css: 'css',
+  go: 'go',
+  html: 'html',
+  js: 'javascript',
+  json: 'json',
+  jsx: 'jsx',
+  markdown: 'markdown',
+  md: 'markdown',
+  mdx: 'mdx',
+  mjs: 'javascript',
+  py: 'python',
+  rs: 'rust',
+  sh: 'shellscript',
+  toml: 'toml',
+  ts: 'typescript',
+  tsx: 'tsx',
+  yaml: 'yaml',
+  yml: 'yaml',
+  zig: 'zig',
+}
+
+export function filetypeFromPath(path: string): string | undefined {
+  const dot = path.lastIndexOf('.')
+  if (dot < 0) return undefined
+  const ext = path.slice(dot + 1).toLowerCase()
+  return EXT_TO_SHIKI[ext]
+}

package/src/ui/components/diff-renderer/fold-strip.tsx

@@ -0,0 +1,84 @@
+import { theme } from '../../theme'
+import { FOLD_STEP, type FoldInfo } from './build-rows'
+import { type FoldDispatch } from './pierre-diff'
+
+interface Props {
+  fold: FoldInfo
+  dispatch: FoldDispatch
+}
+
+function Button({ label, onPress }: { label: string; onPress: () => void }) {
+  return (
+    <box
+      paddingLeft={1}
+      paddingRight={1}
+      backgroundColor={theme.colors['sideBar.background']}
+      onMouseDown={onPress}
+    >
+      <text fg={theme.colors['textLink.foreground']}>{label}</text>
+    </box>
+  )
+}
+
+function Spacer() {
+  return <text> </text>
+}
+
+export function FoldStrip({ dispatch, fold }: Props) {
+  const { bottomExpanded, foldId, hidden, topExpanded, total } = fold
+  const stepUp = Math.min(FOLD_STEP, hidden)
+  const stepDown = Math.min(FOLD_STEP, hidden)
+  const shrinkUp = Math.min(FOLD_STEP, topExpanded)
+  const shrinkDown = Math.min(FOLD_STEP, bottomExpanded)
+
+  const controls: React.ReactNode[] = []
+  if (hidden > 0) {
+    controls.push(
+      <Button
+        key="up"
+        label={`↑${stepUp}`}
+        onPress={() => dispatch.adjust(foldId, 'top', stepUp)}
+      />,
+      <Spacer key="sp1" />,
+      <Button
+        key="down"
+        label={`↓${stepDown}`}
+        onPress={() => dispatch.adjust(foldId, 'bottom', stepDown)}
+      />,
+      <Spacer key="sp2" />,
+      <Button key="all" label="⇅ all" onPress={() => dispatch.set(foldId, total, 0)} />
+    )
+  }
+  if (shrinkUp > 0) {
+    controls.push(
+      <Spacer key="sp3" />,
+      <Button
+        key="shrinkUp"
+        label={`−↑${shrinkUp}`}
+        onPress={() => dispatch.adjust(foldId, 'top', -shrinkUp)}
+      />
+    )
+  }
+  if (shrinkDown > 0) {
+    controls.push(
+      <Spacer key="sp4" />,
+      <Button
+        key="shrinkDown"
+        label={`−↓${shrinkDown}`}
+        onPress={() => dispatch.adjust(foldId, 'bottom', -shrinkDown)}
+      />
+    )
+  }
+
+  return (
+    <box
+      flexDirection="row"
+      backgroundColor={theme.colors['sideBarSectionHeader.background']}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <text fg={theme.colors['descriptionForeground']}>{`⋯ ${hidden} hidden `}</text>
+      {controls}
+    </box>
+  )
+}

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,170 @@
+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 { theme } 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 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,207 @@
+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 { theme } 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 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' }> }) {
+  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[][]
+}) {
+  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 }) {
+  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,166 @@
+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 { theme } 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
+}) {
+  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 }) {
+  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>
+  )
+}