Activity feed

// activity-feed: what a team of agents did in the last hour, newest first, as Box and Text only.
// Fixed columns so every row lines up in a monospace face: age 5 (muted, padded on the right), actor
// 9 and verb 11 plain, and the target in the last 23, subtle, so the eye reads who and what before
// where. Actors are not in the claude colour: ten orange names would be ten accents and drown the one
// failed row, which takes error on its verb and target and is the only colour on the page.
// 10 rows across 4 agents and the lead, 1 failed; the footer is counted from the rows.
// Same frame as the other text designs: bold subject, muted SAMPLE at column 48, muted summary last.
// Sample data only.
const HEAD = 'Activity, last hour'
const WIDTH = 48
const TAG = 'SAMPLE'
const COL = { age: 5, actor: 9, verb: 11 }

// [age, actor, verb, target]; a verb of 'failed' marks the failed row
const ROWS = [
  ['2m', 'agent-3', 'edited', 'src/app.ts'],
  ['3m', 'agent-1', 'ran', 'npm test, 42 passed'],
  ['5m', 'agent-2', 'read', 'CLAUDE.md'],
  ['8m', 'agent-4', 'failed', 'tsc, 3 errors in api.ts'],
  ['11m', 'agent-1', 'created', 'src/budget.ts'],
  ['14m', 'lead', 'assigned', 'task #42 to agent-2'],
  ['19m', 'agent-2', 'committed', 'a1c9e3f fix retry'],
  ['26m', 'agent-3', 'edited', 'test/pool.spec.ts'],
  ['34m', 'lead', 'compacted', 'context 71% to 18%'],
  ['52m', 'agent-4', 'pushed', 'main, 3 commits'],
]
const FAILED = ROWS.filter(r => r[2] === 'failed').length

export default {
  id: 'activity-feed',
  title: 'Activity feed',
  category: 'work',
  description: 'Newest-first agent activity in Box and Text: muted ages, plain actors and verbs, subtle targets, a failed step in error.',
  element: ui => {
    const { Box, Text } = ui
    return Box({
      flexDirection: 'column',
      children: [
        Text({
          key: 'head',
          children: [
            Text({ key: 'name', bold: true, children: [HEAD.padEnd(WIDTH - TAG.length)] }),
            Text({ key: 'tag', dimColor: true, children: [TAG] }),
          ],
        }),
        ...ROWS.map(([age, actor, verb, target], i) => {
          const failed = verb === 'failed'
          return Text({
            key: `r${i}`,
            children: [
              Text({ key: 'a', dimColor: true, children: [age.padEnd(COL.age)] }),
              Text({ key: 'w', children: [actor.padEnd(COL.actor)] }),
              Text({ key: 'v', ...(failed && { color: 'error' }), children: [verb.padEnd(COL.verb)] }),
              Text({ key: 't', color: failed ? 'error' : 'subtle', children: [target] }),
            ],
          })
        }),
        Text({ key: 'sum', dimColor: true, children: [`-- ${ROWS.length} events, ${FAILED} failed --`] }),
      ],
    })
  },
}