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 isGrid = e.surface === 'terminal'

    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>)
    // A row as a flex line, for surfaces that draw text in a proportional font.
    const items = (row: Row) =>
      row.map((s, j) => {
        if ('cells' in s) {
          const total = Math.max(1, s.parts.reduce((n, p) => n + p.n, 0))
          return (
            <Box height={0.5} {...(s.w ? { width: s.w, flexShrink: 0 } : { flexGrow: 1 })}>
              {s.parts.map(p => <Box flexGrow={(p.n / total) * 1000} backgroundColor={p.c ?? TRACK} />)}
            </Box>
          )
        }
        if (s.fill) return <Box flexGrow={1} />
        const text = <Text key={String(j)} color={s.c} dimColor={s.d} bold={s.b} wrap="truncate-end">{!s.w ? s.t : s.right ? s.t.trim() : s.t.trimEnd()}</Text>
        return s.w || s.keep ? <Box width={s.w} flexShrink={0} justifyContent={s.right ? 'flex-end' : 'flex-start'}>{text}</Box> : text
      })
    const line = (row: Row) => (row.length ? <Box alignItems="center">{items(row)}</Box> : <Box height={0.5} />)
    const frame = (title: string, tone: string, rows: Row[], right = '') => {
      if (!isGrid)
        return (
          <Box flexDirection="column" marginTop={2} borderStyle="round" borderColor={tone} borderDimColor>
            <Box marginBottom={1}>
              <Box flexShrink={0}>
                <Text color={tone} bold>{title}</Text>
              </Box>
              <Box flexGrow={1} />
              {right ? <Text dimColor wrap="truncate-end">{right}</Text> : null}
            </Box>
            {rows.map(line)}
          </Box>
        )
      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 counts = (added: number, removed: number): Row => [
      { t: `+${added}`.padStart(5), c: 'success', w: 5, right: true },
      { t: ` −${removed}`.padEnd(6), c: 'error', w: 6 },
    ]

    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, keep: true }, { t: `+${added}`, c: 'success', keep: true }, { t: ` −${removed}`, c: 'error', keep: true }]
      : [{ t: 'No edits yet', d: true }]
    // Off the grid only the branch name gives way.
    if (tree)
      glance.push(
        { t: `   ${tree.branch}`, c: 'suggestion' },
        ...(tree.ahead ? [{ t: ` ↑${tree.ahead}`, d: true, keep: true }] : []),
        ...(tree.behind ? [{ t: ` ↓${tree.behind}`, c: 'warning', keep: true }] : []),
      )

    // 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, keep: true }] : counts(f.added, f.removed ?? 0)
            return spread([{ t: mine ? '● ' : '○ ', c: mine ? 'suggestion' : undefined, d: !mine, keep: true }, { t: f.status.padEnd(3), c: tone, w: 3 }, { 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', keep: true }] : [])],
            [
              {
                cells: [{ t: '■'.repeat(bar.plus), c: 'success' }, { t: '■'.repeat(bar.minus), c: 'error' }, { t: '·'.repeat(bar.rest), d: true }],
                parts: [{ n: bar.plus, c: 'success' }, { n: bar.minus, c: 'error' }, { n: bar.rest }],
                w: 8,
              },
              ...counts(f.added, f.removed),
            ],
            inner,
          )
          const sub = spread([{ t: `  ${folder(f.path, cwd)}`, d: true }], [{ t: f.agents.join(', '), d: true }, { t: ` · ${f.edits}× · ${ago(now - f.at)}`, d: true, keep: 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}>
        {isGrid ? <Text>{draw(glance, w - 3)}</Text> : line(glance)}
        {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>
    )
  })