diff-minimap

1import type { Register } from 'claude-code'
2
3import { GLYPH, minimapOf } from './minimap'
4import type { EditOutput } from './minimap'
5
6export const register: Register = on => {
7  on('ui.render', { component: 'ToolUse', props: { tool: ['Edit', 'Write'] } }, async ($, e, next) => {
8    const drawn = await next(e)
9    const { isRunning, isErrored, isInterrupted, output } = e.props
10    if (isRunning || isErrored || isInterrupted || typeof output !== 'object' || output === null) return drawn
11
12    const map = minimapOf(output as EditOutput)
13    if (map === null) return drawn
14
15    const { Box, Text } = $.ui.resolve(e)
16    const where = map.firstLine === map.lastLine ? `L${map.firstLine}` : `L${map.firstLine}-${map.lastLine}`
17
18    return (
19      <Box flexDirection="row">
20        <Box flexDirection="column" flexGrow={1} flexShrink={1}>
21          {drawn}
22        </Box>
23        <Box flexDirection="column" flexShrink={0} marginLeft={1} alignItems="center">
24          {map.marks.map(mark => (
25            <Text color={GLYPH[mark].color} dimColor={mark === 'none'}>
26              {GLYPH[mark].text}
27            </Text>
28          ))}
29          <Text dimColor>{where}</Text>
30          <Text dimColor>/{map.totalLines}</Text>
31        </Box>
32      </Box>
33    )
34  })
35}
36

1export type Hunk = {
2  oldStart: number
3  oldLines: number
4  newStart: number
5  newLines: number
6  lines: readonly string[]
7}
8
9/** The parts of an Edit or Write result the minimap reads. */
10export type EditOutput = {
11  structuredPatch?: readonly Hunk[]
12  originalFile?: string | null
13  content?: string
14  type?: 'create' | 'update'
15}
16
17export type Mark = 'added' | 'removed' | 'changed' | 'none'
18
19export type Minimap = { marks: Mark[]; totalLines: number; firstLine: number; lastLine: number }
20
21export const ROWS = 8
22
23function lineCount(text: string): number {
24  if (text === '') return 0
25  const lines = text.split('\n')
26  return lines[lines.length - 1] === '' ? lines.length - 1 : lines.length
27}
28
29function hunksOf(output: EditOutput): readonly Hunk[] {
30  const patch = output.structuredPatch ?? []
31  if (patch.length > 0 || output.type !== 'create' || output.content === undefined) return patch
32  const total = lineCount(output.content)
33  return [{ oldStart: 0, oldLines: 0, newStart: 1, newLines: total, lines: Array.from({ length: total }, () => '+') }]
34}
35
36/** Buckets the file into up to ROWS slices and marks each slice the edit touched; null when there is nothing to show. */
37export function minimapOf(output: EditOutput, rows = ROWS): Minimap | null {
38  const hunks = hunksOf(output)
39  if (hunks.length === 0) return null
40
41  const added = hunks.reduce((sum, hunk) => sum + hunk.lines.filter(line => line.startsWith('+')).length, 0)
42  const removed = hunks.reduce((sum, hunk) => sum + hunk.lines.filter(line => line.startsWith('-')).length, 0)
43  const fromHunks = Math.max(...hunks.map(hunk => hunk.newStart + Math.max(hunk.newLines, 1) - 1))
44  const original = typeof output.originalFile === 'string' ? lineCount(output.originalFile) : 0
45  const totalLines = Math.max(1, fromHunks, original + added - removed)
46
47  const slices = Math.min(rows, totalLines)
48  const marks: Mark[] = Array.from({ length: slices }, () => 'none')
49  const mark = (line: number, kind: 'added' | 'removed'): void => {
50    const row = Math.min(slices - 1, Math.max(0, Math.floor(((line - 1) / totalLines) * slices)))
51    const current = marks[row]
52    marks[row] = current === 'none' || current === kind ? kind : 'changed'
53  }
54
55  let firstLine = Number.POSITIVE_INFINITY
56  let lastLine = 0
57  for (const hunk of hunks) {
58    let line = Math.max(1, hunk.newStart)
59    for (const text of hunk.lines) {
60      if (text.startsWith('+')) {
61        mark(line, 'added')
62        firstLine = Math.min(firstLine, line)
63        lastLine = Math.max(lastLine, line)
64        line += 1
65      } else if (text.startsWith('-')) {
66        mark(line, 'removed')
67        firstLine = Math.min(firstLine, line)
68        lastLine = Math.max(lastLine, line)
69      } else {
70        line += 1
71      }
72    }
73  }
74  if (lastLine === 0) return null
75
76  return { marks, totalLines, firstLine, lastLine }
77}
78
79export const GLYPH: Record<Mark, { text: string; color?: string }> = {
80  added: { text: '█', color: 'green' },
81  removed: { text: '█', color: 'red' },
82  changed: { text: '█', color: 'yellow' },
83  none: { text: '│' },
84}
85