task-progress

1import type { Register } from 'claude-code'
2
3type Item = { id: string; label: string; status: 'pending' | 'in_progress' | 'completed' }
4
5// widest the bar gets, in cells
6const WIDTH = 20
7
8// the task list as the tools below last left it; TodoWrite and TaskList send the whole list,
9// TaskCreate and TaskUpdate one change. A task made before the mod loaded is unknown to
10// TaskCreate/TaskUpdate until TaskList is called.
11let items: Item[] = []
12
13export const register: Register = on => {
14  on('session.start', ($, e, next) => {
15    items = []
16
17    return next(e)
18  })
19
20  // /clear (or a resume) ends the session and starts the next one without a session.start: the old list is not the new session's
21  on('session.end', ($, e, next) => {
22    items = []
23    $.ui.invalidate('ui.render')
24
25    return next(e)
26  })
27
28  // subagents keep their own lists: only the main loop's calls count
29  on('tool.call', { tool: 'TodoWrite' }, async ($, e, next) => {
30    const ran = await next(e)
31    if (ran.deny !== undefined || ran.isError === true || e.agentId !== undefined) return ran
32
33    items = ran.result.newTodos.map((t, i) => ({ id: String(i), label: t.activeForm, status: t.status }))
34    $.ui.invalidate('ui.render')
35
36    return ran
37  })
38
39  on('tool.call', { tool: 'TaskCreate' }, async ($, e, next) => {
40    const ran = await next(e)
41    if (ran.deny !== undefined || ran.isError === true || e.agentId !== undefined) return ran
42
43    items = [...items, { id: ran.result.task.id, label: e.activeForm ?? ran.result.task.subject, status: 'pending' }]
44    $.ui.invalidate('ui.render')
45
46    return ran
47  })
48
49  on('tool.call', { tool: 'TaskUpdate' }, async ($, e, next) => {
50    const ran = await next(e)
51    if (ran.deny !== undefined || ran.isError === true || e.agentId !== undefined || !ran.result.success) return ran
52
53    const { taskId, status } = e
54    items = status === 'deleted'
55      ? items.filter(i => i.id !== taskId)
56      : items.map(i => i.id === taskId ? { ...i, label: e.activeForm ?? e.subject ?? i.label, status: status ?? i.status } : i)
57    $.ui.invalidate('ui.render')
58
59    return ran
60  })
61
62  on('tool.call', { tool: 'TaskList' }, async ($, e, next) => {
63    const ran = await next(e)
64    if (ran.deny !== undefined || ran.isError === true || e.agentId !== undefined) return ran
65
66    // TaskList has no activeForm: keep the label a known task already has
67    items = ran.result.tasks.map(t => ({ id: t.id, label: items.find(i => i.id === t.id)?.label ?? t.subject, status: t.status }))
68    $.ui.invalidate('ui.render')
69
70    return ran
71  })
72
73  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
74    // the band is one instance: a hook that answers without next hides every other mod's band, so draw above what is beneath
75    const below = await next(e)
76    const done = items.filter(i => i.status === 'completed').length
77    const isFinished = items.length > 0 && done === items.length
78
79    // an empty list shows 0/0; a finished one stays while the turn runs, then goes
80    if (e.props.hasSurvey || (isFinished && !e.props.isWorking)) return below
81
82    const { Box, Text } = $.ui.resolve(e)
83    const active = items.find(i => i.status === 'in_progress')
84    const width = Math.max(5, Math.min(WIDTH, Math.floor(e.props.bodyColumns / 4)))
85    // floor, so the bar is only full when every task is done
86    const filled = items.length === 0 ? 0 : Math.floor((width * done) / items.length)
87
88    return (
89      <Box flexDirection="column">
90        <Text wrap="truncate">
91          <Text color="claude">task-progress</Text>{'  '}
92          <Text color="success">{'▰'.repeat(filled)}</Text>
93          <Text dimColor>{'▱'.repeat(width - filled)}</Text>
94          {'  '}
95          <Text bold>{`${done}/${items.length}`}</Text>
96          {active && <Text dimColor>{`  ·  ${active.label}…`}</Text>}
97        </Text>
98        {below}
99      </Box>
100    )
101  })
102}
103