Diff view

// diff-view: one unified diff hunk as Box and Text only, the way a review pane prints a change. Each
// line is one Text of coloured spans, not a row of cells, so the pane counts it as one line and the
// 48-column budget holds per line. The prefix is fixed at 8 columns (old 2, new 2, sign 1, gaps 3),
// so code starts in the same column on every row and has 40 columns left.
// The hunk is "@@ -41,7 +41,9 @@" over 12 lines, which fixes the split: 4 context, 3 removed and
// 5 added (old 41-47 is 7 lines, new 41-49 is 9). The footer's +5 -3 is counted from the same rows.
// Line numbers and the hunk header are muted so the eye lands on the change; context stays plain.
// The four text designs share one frame: a bold subject line with a muted SAMPLE at column 48, the
// body, and a muted "-- summary --" line, as the pictures share candle's caption.
// Why not diffAdded and diffRemoved: the host paints those as line backgrounds (deep green and red in
// dark themes, pale in light ones), so as text they all but vanish. Why not success and error: the
// Word keys are the diff's own foregrounds, mid-tones that read in every theme. Sample data only.
const FILE = 'src/agents/pool.ts'
const HUNK = '@@ -41,7 +41,9 @@ class AgentPool'
const WIDTH = 48
const TAG = 'SAMPLE'

// [kind, old line, new line, code]: ' ' context, '-' removed, '+' added
const LINES = [
  [' ', 41, 41, '  async run(task: Task) {'],
  [' ', 42, 42, '    const agent = this.pick(task)'],
  ['-', 43, 0, '    const res = await agent.send(task)'],
  ['-', 44, 0, '    this.spent += res.tokens'],
  ['+', 0, 43, '    const res = await agent.send(task, {'],
  ['+', 0, 44, '      maxTokens: this.budget.left(),'],
  ['+', 0, 45, '    })'],
  ['+', 0, 46, '    this.spent += res.usage.total'],
  ['-', 45, 0, '    return res.text'],
  ['+', 0, 47, '    return res.text.trim()'],
  [' ', 46, 48, '  }'],
  [' ', 47, 49, '}'],
]
const ADDED = LINES.filter(l => l[0] === '+').length
const REMOVED = LINES.filter(l => l[0] === '-').length
const COLOUR = { '+': 'diffAddedWord', '-': 'diffRemovedWord' }

const num = n => (n ? String(n) : '').padStart(2)

export default {
  id: 'diff-view',
  title: 'Diff view',
  category: 'code',
  description: 'A unified diff hunk in Box and Text: muted line numbers and hunk header, added and removed lines in the theme\'s diff colours.',
  element: ui => {
    const { Box, Text } = ui
    return Box({
      flexDirection: 'column',
      children: [
        Text({
          key: 'file',
          children: [
            Text({ key: 'name', bold: true, children: [FILE.padEnd(WIDTH - TAG.length)] }),
            Text({ key: 'tag', dimColor: true, children: [TAG] }),
          ],
        }),
        Text({ key: 'hunk', color: 'subtle', children: [HUNK] }),
        ...LINES.map(([kind, a, b, code], i) => Text({
          key: `l${i}`,
          children: [
            Text({ key: 'n', dimColor: true, children: [`${num(a)} ${num(b)} `] }),
            Text({ key: 'c', ...(COLOUR[kind] && { color: COLOUR[kind] }), children: [`${kind} ${code}`] }),
          ],
        })),
        Text({ key: 'sum', dimColor: true, children: [`-- 1 hunk, +${ADDED} -${REMOVED} --`] }),
      ],
    })
  },
}