change-ledger

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text } = $.ui.resolve(e)
    const list = await read($, files)
    const tree = await read($, git)
    const now = await $.clock.now()
    const cwd = await $.session.cwd()
    const w = Math.max(28, e.props.bodyColumns - 1)
    const inner = w - 6

    const draw = (row: Row, width: number) =>
      fit(row, width).map((s, j) => <Text key={String(j)} color={s.c} dimColor={s.d} bold={s.b}>{s.t}</Text>)
    const frame = (title: string, tone: string, rows: Row[], right = '') => {
      const rule = Math.max(0, w - 6 - title.length - (right ? right.length + 2 : 0))
      return (
        <Box key={title} flexDirection="column" marginTop={1}>
          <Text>
            <Text color={tone} dimColor>╭─ </Text>
            <Text color={tone} bold>{title}</Text>
            <Text color={tone} dimColor> {'─'.repeat(rule)}</Text>
            {right ? <Text dimColor> {right} </Text> : null}
            <Text color={tone} dimColor>─╮</Text>
          </Text>
          {rows.map((row, i) => (
            <Text key={String(i)}>
              <Text color={tone} dimColor>│  </Text>
              {draw(row, inner)}
              <Text color={tone} dimColor>  │</Text>
            </Text>
          ))}
          <Text color={tone} dimColor>╰{'─'.repeat(w - 2)}╯</Text>
        </Box>
      )
    }

    const name = (path: string) => path.split('/').pop() ?? path
    const dir = (path: string) => {
      const inside = path.startsWith(`${cwd}/`) ? path.slice(cwd.length + 1) : path
      const parts = inside.split('/').slice(0, -1)
      if (!parts.length) return './'
      return parts.length > 2 && !path.startsWith(`${cwd}/`) ? `…/${parts.slice(-2).join('/')}/` : `${parts.join('/')}/`
    }
    const counts = (added: number, removed: number): Row => [
      { t: `+${added}`.padStart(5), c: 'success' },
      { t: ` −${removed}`.padEnd(6), c: 'error' },
    ]

    const added = list.reduce((n, f) => n + f.added, 0)
    const removed = list.reduce((n, f) => n + f.removed, 0)
    const glance: Row = list.length
      ? [{ t: `${list.length} ${list.length === 1 ? 'file' : 'files'}  `, b: true }, { t: `+${added}`, c: 'success' }, { t: ` −${removed}`, c: 'error' }]
      : [{ t: 'No edits yet', d: true }]
    if (tree) glance.push({ t: `   ${tree.branch}`, c: 'suggestion' }, ...(tree.ahead ? [{ t: ` ↑${tree.ahead}`, d: true }] : []), ...(tree.behind ? [{ t: ` ↓${tree.behind}`, c: 'warning' }] : []))

    // The git frame lists every changed path: the ones this session edited get a filled dot, the rest (shell, you) an empty one.
    const touched = new Set(list.map(f => f.path))
    const GIT_MAX = 8
    const gitRows: Row[] = tree
      ? tree.files.length
        ? tree.files.slice(0, GIT_MAX).map(f => {
            const mine = touched.has(`${tree.root}/${f.path}`)
            const tone = f.status === '??' || f.status === 'A' ? 'success' : f.status === 'D' ? 'error' : 'warning'
            const right: Row = f.added === undefined ? [{ t: f.status === '??' ? 'new' : '', d: true }] : counts(f.added, f.removed ?? 0)
            return spread([{ t: mine ? '● ' : '○ ', c: mine ? 'suggestion' : undefined, d: !mine }, { t: f.status.padEnd(3), c: tone }, { t: f.path, d: !mine }], right, inner)
          })
        : [[{ t: 'Working tree clean.', d: true }]]
      : []
    if (tree && tree.files.length > GIT_MAX) gitRows.push([{ t: `+${tree.files.length - GIT_MAX} more`, d: true }])

    // Edits get the rows left after the top padding, the glance row and the git frame; each file takes two rows plus a blank between files.
    const fixed = 2 + 3 + (tree ? gitRows.length + 3 : 0)
    const room = Math.max(5, e.props.scroll.bodyRows - fixed)
    const shown = list.slice(0, Math.max(1, Math.floor((room + 1) / 3)))
    const max = Math.max(1, ...shown.map(f => f.added + f.removed))
    const editRows: Row[] = shown.length
      ? shown.flatMap((f, i) => {
          const bar = statBar(f.added, f.removed, max, 8)
          const top = spread(
            [{ t: name(f.path), b: true }, ...(f.created ? [{ t: ' new', c: 'success' }] : [])],
            [{ t: '■'.repeat(bar.plus), c: 'success' }, { t: '■'.repeat(bar.minus), c: 'error' }, { t: '·'.repeat(bar.rest), d: true }, ...counts(f.added, f.removed)],
            inner,
          )
          const sub = spread([{ t: `  ${dir(f.path)}`, d: true }], [{ t: `${f.agents.join(', ')} · ${f.edits}× · ${ago(now - f.at)}`, d: true }], inner)
          return i ? [[], top, sub] : [top, sub]
        })
      : [[{ t: 'Files Claude edits or writes show here.', d: true }]]
    const more = list.length - shown.length

    return (
      <Box flexDirection="column" paddingTop={1}>
        <Text>
          {draw(glance, w - 3)}
        </Text>
        {frame('Edits', 'suggestion', editRows, more > 0 ? `+${more} more` : '')}
        {tree ? frame('Working tree', tree.files.some(f => !touched.has(`${tree.root}/${f.path}`)) ? 'warning' : 'success', gitRows, `${tree.files.length} changed`) : null}
      </Box>
    )
  })