diff-stats

1import type { Register } from 'claude-code'
2
3import { drawToolRows } from './hosts/row'
4import { create as diffStats } from './rules/diff-stats'
5
6export const register: Register = on => {
7  const rules = [diffStats()]
8  drawToolRows(on, rules)
9}
10

1import type { On } from 'claude-code'
2
3import { drawToolRow, NO_ROW_READS } from '../engine'
4import type { RenderRule } from '../engine'
5
6// Tool rows for rules that draw from the row alone.
7export const drawToolRows = (on: On, rules: readonly RenderRule[]): void => {
8  for (const { id, toolRow } of rules) {
9    if (toolRow === undefined) continue
10    on('ui.render', { component: 'ToolUse' }, async ($, e, next) =>
11      drawToolRow(id, toolRow, e, next, {
12        ...NO_ROW_READS,
13        elements: () => $.ui.resolve(e),
14        log: text => $.ui.log(text),
15      }),
16    )
17  }
18}
19

1import type { RenderElement } from 'claude-code'
2
3import { barCells, lineDiff } from '../diff'
4import type { DiffStats } from '../diff'
5import type { RenderRule } from '../engine'
6
7const isRecord = (value: unknown): value is Record<string, unknown> => typeof value === 'object' && value !== null
8
9// From the call's input as the model sent it. Write's props carry no earlier
10// content, so a Write counts as all lines added and none removed.
11const statsOf = (tool: string, input: unknown): DiffStats | undefined => {
12  if (!isRecord(input)) return undefined
13  if (tool === 'Edit') {
14    const { old_string: before, new_string: after } = input
15    return typeof before === 'string' && typeof after === 'string' ? lineDiff(before, after) : undefined
16  }
17  if (tool === 'Write') {
18    const { content } = input
19    return typeof content === 'string' ? lineDiff('', content) : undefined
20  }
21  return undefined
22}
23
24export const create = (): RenderRule => ({
25  id: 'diff-stats',
26  toolRow: {
27    tools: ['Edit', 'Write'],
28    draw: ({ e, row, elements: { Box, Text } }) => {
29      // A refused, failed or cut call changed nothing worth counting.
30      if (e.props.isErrored || e.props.isInterrupted) return undefined
31      const stats = statsOf(e.props.tool, e.props.input)
32      if (stats === undefined || stats.added + stats.removed === 0) return undefined
33      const { green, red } = barCells(stats)
34      // The engine's row stays whole; a Text may not hold it, so the bar's
35      // Texts are its siblings in a row Box.
36      return h(
37        Box,
38        { flexDirection: 'row' },
39        row,
40        ' ',
41        h(
42          Box,
43          { key: 'diff-stats', flexDirection: 'row', flexShrink: 0 },
44          h(Text, { color: 'green' }, `+${stats.added}`),
45          ' ',
46          h(Text, { color: 'red' }, `-${stats.removed}`),
47          ' ',
48          green > 0 ? h(Text, { color: 'green' }, '█'.repeat(green)) : null,
49          red > 0 ? h(Text, { color: 'red' }, '█'.repeat(red)) : null,
50        ),
51      ) as RenderElement
52    },
53  },
54})
55

1import type { ElementTable, FsStat, RenderElement, RenderInput, RenderPropsOf, SessionRepo } from 'claude-code'
2
3// Which tools a rule draws on: a list of names, or every tool.
4export type ToolSet = readonly string[] | 'all'
5
6// Reads a draw may make, as closures over `$` (a rule never holds `$`).
7// `repo` is the session's git repository, or null outside one.
8export type Reads = {
9  cwd: () => Promise<string>
10  repo: () => Promise<SessionRepo | null>
11}
12
13// A draw may answer at once or after its reads.
14type Drawn = RenderElement | undefined | Promise<RenderElement | undefined>
15
16// What a tool row rule draws from: the row's input, the engine's own drawing
17// of it (`next(e)`), and the surface's elements. `durationMs` is how long the
18// call ran, given to a `timed` rule once the call has ended in this session.
19export type ToolRowDraw = Reads & {
20  e: RenderInput<'ToolUse'>
21  row: RenderElement
22  elements: ElementTable
23  durationMs?: number
24}
25
26// What a tool row rewrite reads: the row's props, the person's home folder
27// and the session's project root.
28export type ToolRowRewrite = {
29  props: RenderPropsOf['ToolUse']
30  home: () => Promise<string | undefined>
31  root: () => Promise<string>
32}
33
34// What a tool result rule draws from: the result block's input, the engine's
35// drawing of it, and the surface's elements.
36export type ToolResultDraw = Reads & {
37  e: RenderInput<'ToolResult'>
38  row: RenderElement
39  elements: ElementTable
40}
41
42// What an assistant text rule draws from. `$` never leaves the engine's hook,
43// so the calls a rule needs come as closures over it.
44export type AssistantDraw = Reads & {
45  e: RenderInput<'AssistantMessage'>
46  elements: ElementTable
47  stat: (path: string) => Promise<FsStat>
48  insert: (text: string) => void
49}
50
51// What an assistant text rewrite reads: the block, and the session's reads.
52export type AssistantRewrite = Reads & { e: RenderInput<'AssistantMessage'> }
53
54// One rendering rule. `toolRow` rewrites the props of the ToolUse rows of the
55// named tools (`rewrite`, which changes the row alone) or draws beside them
56// (`draw`); `toolResult` rewrites the props of a result block (`rewrite`) or
57// draws beside it (`draw`); `assistantText` rewrites an assistant reply's
58// text (`rewrite`, handed on to the hooks beneath, so rules of several mods
59// stack) or draws the block itself (`draw`). A draw or rewrite that answers
60// undefined, or throws, leaves the engine's.
61export type RenderRule = {
62  id: string
63  toolRow?: {
64    tools: ToolSet
65    timed?: true
66    rewrite?: (input: ToolRowRewrite) => Promise<RenderPropsOf['ToolUse'] | undefined>
67    draw?: (input: ToolRowDraw) => Drawn
68  }
69  toolResult?: {
70    tools: ToolSet
71    rewrite?: (props: RenderPropsOf['ToolResult']) => RenderPropsOf['ToolResult'] | undefined
72    draw?: (input: ToolResultDraw) => Drawn
73  }
74  assistantText?: {
75    rewrite?: (input: AssistantRewrite) => Promise<string | undefined>
76    draw?: (input: AssistantDraw) => Promise<RenderElement | undefined>
77  }
78}
79
80export const reason = (error: unknown): string => (error instanceof Error ? error.message : String(error))
81
82const covers = (tools: ToolSet, tool: string): boolean => tools === 'all' || tools.includes(tool)
83
84// The calls a host does not give. A rule that makes one has its draw logged
85// and skipped, and its tests fail: name what it uses in engine.json `needs`.
86export const absent = (name: string) => (): Promise<never> =>
87  Promise.reject(new Error(`${name} is not given to this mod; name it in engine.json needs`))
88
89export const NO_READS: Reads = { cwd: absent('cwd'), repo: absent('repo') }
90
91type Log = (text: string) => unknown
92
93// What a tool row hook hands its rule, as closures over the hook's `$`.
94export type RowHost = Reads & {
95  home: () => Promise<string | undefined>
96  root: () => Promise<string>
97  duration: () => Promise<number | undefined>
98  elements: () => ElementTable
99  log: Log
100}
101
102export const NO_ROW_READS = { ...NO_READS, home: absent('home'), root: absent('root'), duration: absent('duration') }
103
104// ToolUse carries no ctrl+o flag, so the engine's row is always kept and the
105// rule draws beside it.
106export const drawToolRow = async (
107  id: string,
108  toolRow: NonNullable<RenderRule['toolRow']>,
109  e: RenderInput<'ToolUse'>,
110  next: (e: RenderInput<'ToolUse'>) => Promise<RenderElement>,
111  host: RowHost,
112): Promise<RenderElement> => {
113  const { rewrite, draw } = toolRow
114  if (!covers(toolRow.tools, e.props.tool)) return next(e)
115  let props: RenderPropsOf['ToolUse'] | undefined
116  try {
117    props = await rewrite?.({ props: e.props, home: host.home, root: host.root })
118  } catch (error) {
119    await host.log(`${id}: drew the engine's props, ${reason(error)}`)
120  }
121  const row = await next(props === undefined ? e : { ...e, props })
122  if (draw === undefined) return row
123  try {
124    // Read only by a timed rule, so the other rows do not redraw on a write.
125    const durationMs = toolRow.timed ? await host.duration() : undefined
126    const drawn = await draw({ e, row, elements: host.elements(), durationMs, cwd: host.cwd, repo: host.repo })
127    return drawn ?? row
128  } catch (error) {
129    await host.log(`${id}: drew the engine's row, ${reason(error)}`)
130    return row
131  }
132}
133
134// What a tool result hook hands its rule, as closures over the hook's `$`.
135export type ResultHost = Reads & { elements: () => ElementTable; log: Log }
136
137export const drawToolResult = async (
138  id: string,
139  toolResult: NonNullable<RenderRule['toolResult']>,
140  e: RenderInput<'ToolResult'>,
141  next: (e: RenderInput<'ToolResult'>) => Promise<RenderElement>,
142  host: ResultHost,
143): Promise<RenderElement> => {
144  const { tools, rewrite, draw } = toolResult
145  if (!covers(tools, e.props.tool)) return next(e)
146  let props: RenderPropsOf['ToolResult'] | undefined
147  try {
148    props = rewrite?.(e.props)
149  } catch (error) {
150    await host.log(`${id}: drew the engine's props, ${reason(error)}`)
151  }
152  const row = await next(props === undefined ? e : { ...e, props })
153  if (draw === undefined) return row
154  try {
155    return (await draw({ e, row, elements: host.elements(), cwd: host.cwd, repo: host.repo })) ?? row
156  } catch (error) {
157    await host.log(`${id}: drew the engine's result, ${reason(error)}`)
158    return row
159  }
160}
161
162// What an assistant text hook hands its rule, as closures over the hook's `$`.
163export type TextHost = Reads & {
164  elements: () => ElementTable
165  stat: (path: string) => Promise<FsStat>
166  insert: (text: string) => void
167  log: Log
168}
169
170export const NO_TEXT_READS = { ...NO_READS, stat: absent('stat'), insert: () => {
171  throw new Error('insert is not given to this mod; name it in engine.json needs')
172} }
173
174export const drawAssistantText = async (
175  id: string,
176  assistantText: NonNullable<RenderRule['assistantText']>,
177  e: RenderInput<'AssistantMessage'>,
178  next: (e: RenderInput<'AssistantMessage'>) => Promise<RenderElement>,
179  host: TextHost,
180): Promise<RenderElement> => {
181  const { rewrite, draw } = assistantText
182  let text: string | undefined
183  try {
184    text = await rewrite?.({ e, cwd: host.cwd, repo: host.repo })
185  } catch (error) {
186    await host.log(`${id}: drew the engine's text, ${reason(error)}`)
187  }
188  // The rewrite goes on through `next`, so a link rule of another mod beneath
189  // this one adds its links to ours. The other props are carried as received.
190  const passed = text === undefined || text === e.props.text ? e : { ...e, props: { ...e.props, text } }
191  if (draw === undefined) return next(passed)
192  try {
193    const drawn = await draw({ e: passed, elements: host.elements(), cwd: host.cwd, repo: host.repo, stat: host.stat, insert: host.insert })
194    return drawn ?? next(passed)
195  } catch (error) {
196    await host.log(`${id}: drew the engine's text, ${reason(error)}`)
197    return next(passed)
198  }
199}
200

1export type DiffStats = { added: number; removed: number }
2
3// The widest the bar gets, in cells.
4export const MAX_BAR = 20
5
6// Above this many cells (old lines times new lines, after the shared head and
7// tail are cut) the line diff is skipped and every differing line counts:
8// about a million steps, a few milliseconds.
9const MAX_DIFF_CELLS = 1_000_000
10
11// One trailing newline ends the last line; it does not start another.
12const linesOf = (text: string): string[] => (text === '' ? [] : text.replace(/\n$/, '').split('\n'))
13
14// Length of the longest common subsequence, one row at a time.
15const commonLines = (before: readonly string[], after: readonly string[]): number => {
16  let previous: number[] = new Array<number>(after.length + 1).fill(0)
17  for (const line of before) {
18    const row: number[] = [0]
19    after.forEach((other, j) => {
20      row.push(line === other ? (previous[j] ?? 0) + 1 : Math.max(previous[j + 1] ?? 0, row[j] ?? 0))
21    })
22    previous = row
23  }
24  return previous[after.length] ?? 0
25}
26
27// Lines added and removed going from `before` to `after`, as a line diff
28// counts them.
29export const lineDiff = (before: string, after: string): DiffStats => {
30  const a = linesOf(before)
31  const b = linesOf(after)
32  let head = 0
33  while (head < a.length && head < b.length && a[head] === b[head]) head += 1
34  let tail = 0
35  while (tail < a.length - head && tail < b.length - head && a[a.length - 1 - tail] === b[b.length - 1 - tail]) tail += 1
36  const removedPart = a.slice(head, a.length - tail)
37  const addedPart = b.slice(head, b.length - tail)
38  const common = removedPart.length * addedPart.length > MAX_DIFF_CELLS ? 0 : commonLines(removedPart, addedPart)
39  return { added: addedPart.length - common, removed: removedPart.length - common }
40}
41
42// Cells of green and red: one per line up to MAX_BAR, then proportional. A
43// side with any lines keeps at least one cell.
44export const barCells = ({ added, removed }: DiffStats): { green: number; red: number } => {
45  const total = added + removed
46  if (total === 0) return { green: 0, red: 0 }
47  const cells = Math.min(MAX_BAR, total)
48  const share = Math.round((cells * added) / total)
49  const green = added > 0 && share === 0 ? 1 : removed > 0 && share === cells ? cells - 1 : share
50  return { green, red: cells - green }
51}
52

1// The state the render rules draw from. The build copies this file into the
2// mod as its contract (plugin.json "types"), with the token below replaced by
3// the mod's name: only the plugin that owns a `$.state` value may write it.
4
5// How long one tool call ran, in milliseconds.
6export type DurationMs = number
7
8declare module 'claude-code' {
9  interface PluginState {
10    'diff-stats': {
11      // How long each tool call ran, in milliseconds, by tool_use_id: the
12      // PostToolUse duration, permission prompts and hooks not counted.
13      durations: StateFamily<DurationMs>
14    }
15  }
16}
17