Log tail

// log-tail: the last 14 lines of an agent session log as Box and Text only. Each line is one Text of
// spans: the time muted (8 columns), the level padded to 5 so every message starts at column 16, and
// the message, which has 33 columns. Only the level word carries colour (WARN warning, ERROR error in
// bold), not the message: five full coloured lines out-shouted the rest, and one column is enough to
// scan for the failures. INFO stays plain; DEBUG is subtle on the whole line so it sinks.
// 14 lines: 6 INFO, 3 DEBUG, 2 WARN, 3 ERROR. The footer is counted from the rows, so it cannot drift.
// Same frame as the other text designs: bold subject, muted SAMPLE at column 48, muted summary last.
// Sample data only.
const FILE = 'logs/session-7f3a.log'
const WIDTH = 48
const TAG = 'SAMPLE'

const LINES = [
  ['14:02:07', 'INFO', 'session 7f3a started, 4 agents'],
  ['14:02:07', 'DEBUG', 'loaded CLAUDE.md, 2.1k tokens'],
  ['14:02:09', 'INFO', 'agent-1 picked task #41'],
  ['14:02:11', 'INFO', 'agent-2 picked task #42'],
  ['14:02:15', 'DEBUG', 'prompt cache hit, 18.4k tokens'],
  ['14:02:19', 'WARN', 'context 71% full, compact soon'],
  ['14:02:24', 'ERROR', 'npm test: 2 failed in auth.spec'],
  ['14:02:24', 'INFO', 'agent-1 retry 1 of 3'],
  ['14:02:31', 'DEBUG', 'tool Bash took 6.2s, exit 0'],
  ['14:02:38', 'ERROR', 'rate limited (429), wait 8s'],
  ['14:02:47', 'WARN', 'budget $4.10 of $5.00 spent'],
  ['14:02:52', 'INFO', 'agent-2 done, 12 files, +184'],
  ['14:02:58', 'ERROR', 'pre-commit hook: lint failed'],
  ['14:03:01', 'INFO', 'session total $4.37, 1.2M tok'],
]
const STYLE = {
  INFO: {},
  DEBUG: { color: 'subtle' },
  WARN: { color: 'warning' },
  ERROR: { color: 'error' },
}
const count = level => LINES.filter(l => l[1] === level).length
const plural = (n, word) => `${n} ${word}${n === 1 ? '' : 's'}`

export default {
  id: 'log-tail',
  title: 'Log tail',
  category: 'code',
  description: 'The tail of a session log in Box and Text: muted times, levels in one column, only the WARN and ERROR words in the theme\'s 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] }),
          ],
        }),
        ...LINES.map(([time, level, message], i) => Text({
          key: `l${i}`,
          children: [
            Text({ key: 't', dimColor: true, children: [`${time} `] }),
            Text({ key: 'v', ...STYLE[level], bold: level === 'ERROR', children: [level.padEnd(5)] }),
            Text({ key: 'm', ...(level === 'DEBUG' && STYLE.DEBUG), children: [` ${message}`] }),
          ],
        })),
        Text({ key: 'sum', dimColor: true, children: [`-- ${plural(count('ERROR'), 'error')}, ${plural(count('WARN'), 'warning')} --`] }),
      ],
    })
  },
}