activity

1import { atom, read, update } from 'claude-code'
2import type { ElementTable, EngineInterface, Register, RenderChildren } from 'claude-code'
3
4import type { ActivityCall, CallStatus, Phase, Todo } from '../types'
5
6// ── claude-mods kit v1 (docs/design.md): identical in every mod ──
7const TONE = { accent: 'claude', ok: 'success', warn: 'warning', bad: 'error', dim: 'inactive' } as const
8const GLYPH = { on: '●', off: '○', warn: '▲', ok: '✓', fail: '✗' } as const
9type Kit = Pick<ElementTable, 'Box' | 'Text'>
10
11/** Pane header: state glyph, mod name, one-line live status. */
12function header({ Box, Text }: Kit, glyph: string, tone: string, name: string, status: string) {
13  return (
14    <Box gap={1}>
15      <Text color={tone}>{glyph}</Text>
16      <Text bold>{name}</Text>
17      <Text dimColor wrap="truncate-end">{status}</Text>
18    </Box>
19  )
20}
21
22/** A section: a dim label (with optional small controls beside it), then its rows. */
23function section({ Box, Text }: Kit, label: string, rows: RenderChildren, aside?: RenderChildren) {
24  return (
25    <Box flexDirection="column">
26      <Box gap={1}>
27        <Text dimColor>{label}</Text>
28        {aside}
29      </Box>
30      {rows}
31    </Box>
32  )
33}
34
35/** A number right-aligned in a fixed-width cell. */
36function num({ Box, Text }: Kit, value: string, width: number, color?: string) {
37  return (
38    <Box width={width} flexShrink={0} justifyContent="flex-end">
39      <Text color={color}>{value}</Text>
40    </Box>
41  )
42}
43
44/** Empty state: what will show up here, and how to get it. */
45function empty({ Text }: Kit, text: string) {
46  return <Text dimColor>{text}</Text>
47}
48// ── end kit ──
49
50const PANE = 'activity'
51const calls = atom({ plugin: 'activity', key: 'calls' } as const, [])
52const phase = atom({ plugin: 'activity', key: 'phase' } as const, { kind: 'idle', since: 0, prompt: '' } as Phase)
53const todos = atom({ plugin: 'activity', key: 'todos' } as const, [])
54const showAll = atom({ plugin: 'activity', key: 'showAll' } as const, false)
55
56const STATUS: Record<CallStatus, { icon: string; color: string; label: string }> = {
57  running: { icon: GLYPH.on, color: TONE.accent, label: 'running' },
58  approval: { icon: GLYPH.warn, color: TONE.warn, label: 'waiting for YOUR approval' },
59  done: { icon: GLYPH.ok, color: TONE.ok, label: 'done' },
60  failed: { icon: GLYPH.fail, color: TONE.bad, label: 'failed' },
61  denied: { icon: GLYPH.fail, color: TONE.bad, label: 'denied' },
62}
63
64const TODO_ICON: Record<string, string> = { completed: GLYPH.ok, in_progress: GLYPH.on, pending: GLYPH.off }
65
66const str = (v: unknown) => (typeof v === 'string' ? v : '')
67const base = (p: string) => p.split(/[\\/]/).at(-1) ?? p
68const clip = (s: string, n: number) => (s.length > n ? `${s.slice(0, n - 1)}…` : s)
69
70/** One human line per tool call: what it is actually doing. */
71function describe(tool: string, input: Record<string, unknown>): string {
72  switch (tool) {
73    case 'Bash':
74    case 'PowerShell':
75      return `$ ${str(input.command).replace(/\s+/g, ' ')}`
76    case 'Read':
77    case 'Write':
78    case 'Edit':
79    case 'NotebookEdit':
80      return base(str(input.file_path) || str(input.notebook_path))
81    case 'Grep':
82      return `/${str(input.pattern)}/${input.path ? ` in ${base(str(input.path))}` : ''}`
83    case 'Glob':
84      return str(input.pattern)
85    case 'WebFetch':
86      return str(input.url)
87    case 'WebSearch':
88      return `"${str(input.query)}"`
89    case 'Agent':
90    case 'Task':
91      return `${str(input.subagent_type) || 'agent'}: ${str(input.description)}`
92    case 'TodoWrite':
93      return `${Array.isArray(input.todos) ? input.todos.length : 0} todos`
94    default: {
95      const first = Object.values(input).find(v => typeof v === 'string')
96
97      return typeof first === 'string' ? first : ''
98    }
99  }
100}
101
102const secs = (ms: number) => {
103  const s = Math.max(0, Math.round(ms / 1000))
104
105  return s >= 60 ? `${Math.floor(s / 60)}m${String(s % 60).padStart(2, '0')}s` : `${s}s`
106}
107
108async function setStatus($: EngineInterface, id: string, status: CallStatus, endedAt?: number) {
109  await update($, calls, list => list.map(c => (c.id === id ? { ...c, status, endedAt: endedAt ?? c.endedAt } : c)))
110}
111
112let ticker: { cancel: () => void } | null = null
113
114/** Redraws once a second while something runs, so the timers count up. */
115function startTicking($: EngineInterface) {
116  ticker ??= $.clock.every(1000, () => $.ui.invalidate('ui.render'))
117}
118
119function stopTicking() {
120  ticker?.cancel()
121  ticker = null
122}
123
124export const register: Register = (on, options) => {
125
126  on('session.start', async ($, e, next) => {
127    await $.command.register({ name: 'activity', description: 'Live view: what Claude is running and waiting for right now' })
128    if (options.autoOpen === true) void $.ui.open({ id: PANE, title: 'Activity' })
129
130    return next(e)
131  })
132
133  on('command.run', { command: 'activity' }, async $ => {
134    await $.ui.open({ id: PANE, title: 'Activity' })
135
136    return { text: 'Activity panel opened.' }
137  })
138
139  on('turn.start', async ($, e, next) => {
140    const since = await $.clock.now()
141    await update($, phase, (): Phase => ({ kind: 'thinking', since, prompt: e.text }))
142    startTicking($)
143
144    return next(e)
145  })
146
147  on('turn.complete', async ($, e, next) => {
148    const result = await next(e)
149    if (e.agentId === undefined) {
150      const since = await $.clock.now()
151      await update($, phase, (p): Phase => ({ ...p, kind: 'idle', since }))
152      stopTicking()
153    }
154
155    return result
156  })
157
158  on('tool.call', async ($, e, next) => {
159    const { tool, tool_use_id, agentId, ...input } = e as unknown as { tool: string; tool_use_id: string; agentId?: string } & Record<string, unknown>
160    const call: ActivityCall = {
161      id: tool_use_id,
162      tool,
163      summary: describe(tool, input),
164      agentId,
165      isBackground: input.run_in_background === true,
166      startedAt: await $.clock.now(),
167      status: 'running',
168    }
169    if (tool === 'TodoWrite' && Array.isArray(input.todos)) {
170      await update($, todos, () => (input.todos as Todo[]).map(t => ({ content: t.content, status: t.status, activeForm: t.activeForm })))
171    }
172    await update($, calls, list => [...list, call].slice(-300))
173    if (agentId === undefined) await update($, phase, (p): Phase => ({ ...p, kind: 'tools' }))
174    startTicking($)
175
176    try {
177      const check = await $.tool.check({ tool, input })
178      if (check.decision === 'ask') await setStatus($, tool_use_id, 'approval')
179    } catch {
180      // no verdict available
181    }
182
183    let status: CallStatus = 'failed'
184    try {
185      const ran = await next(e)
186      status = ran.deny !== undefined ? 'denied' : ran.isError === true ? 'failed' : 'done'
187
188      return ran
189    } finally {
190      await setStatus($, tool_use_id, status, await $.clock.now())
191      const stillRunning = (await read($, calls)).some(c => c.agentId === undefined && (c.status === 'running' || c.status === 'approval'))
192      if (agentId === undefined && !stillRunning) await update($, phase, (p): Phase => (p.kind === 'tools' ? { ...p, kind: 'thinking' } : p))
193    }
194  })
195
196  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
197    const { Box, Text, Button } = $.ui.resolve(e)
198    const list = await read($, calls)
199    const now = await $.clock.now()
200    const p = await read($, phase)
201    const plan = await read($, todos)
202    const all = await read($, showAll)
203    const cols = e.props.bodyColumns ?? 40
204    const rows = e.viewport?.rows ?? 30
205
206    const live = list.filter(c => c.status === 'running' || c.status === 'approval')
207    const waitingOnYou = live.filter(c => c.status === 'approval')
208    const agents = await $.agent.list().catch(() => [])
209    const runningAgents = agents.filter(a => a.status === 'running')
210    const recent = list.filter(c => !live.includes(c) && (all || c.agentId === undefined)).slice(-Math.max(3, rows - 18 - live.length - plan.length))
211
212    const kit = { Box, Text }
213    const headline =
214      waitingOnYou.length > 0
215        ? { glyph: GLYPH.warn, tone: TONE.warn, text: `Waiting for you: approve ${waitingOnYou.map(c => c.tool).join(', ')}` }
216        : p.kind === 'idle'
217          ? { glyph: GLYPH.off, tone: TONE.dim, text: 'Idle: waiting for your next prompt' }
218          : p.kind === 'tools'
219            ? { glyph: GLYPH.on, tone: TONE.accent, text: `Running ${live.length} tool${live.length === 1 ? '' : 's'} · turn ${secs(now - p.since)}` }
220            : { glyph: GLYPH.on, tone: TONE.accent, text: `Thinking / writing · turn ${secs(now - p.since)}` }
221
222    return (
223      <Box flexDirection="column" gap={1}>
224        <Box flexDirection="column">
225          {header(kit, headline.glyph, headline.tone, 'activity', headline.text)}
226          {p.kind !== 'idle' && p.prompt !== '' && <Text dimColor wrap="truncate-end">for: {clip(p.prompt.replace(/\s+/g, ' '), cols - 6)}</Text>}
227        </Box>
228
229        {live.length > 0 &&
230          section(
231            kit,
232            'Now',
233            live.map(c => (
234              <Box gap={1}>
235                <Text color={STATUS[c.status].color}>{STATUS[c.status].icon}</Text>
236                <Text>{c.tool}</Text>
237                {num(kit, secs(now - c.startedAt), 6, STATUS[c.status].color)}
238                <Text dimColor wrap="truncate-end">
239                  {c.agentId ? '[subagent] ' : ''}
240                  {c.isBackground ? '[background] ' : ''}
241                  {c.summary}
242                </Text>
243              </Box>
244            )),
245          )}
246
247        {runningAgents.length > 0 &&
248          section(
249            kit,
250            'Subagents',
251            runningAgents.map(a => (
252              <Text wrap="truncate-end">
253                <Text color={TONE.accent}>{GLYPH.on}</Text> {a.type} <Text dimColor>{a.description}</Text>
254              </Text>
255            )),
256          )}
257
258        {plan.length > 0 &&
259          section(
260            kit,
261            `Plan ${plan.filter(t => t.status === 'completed').length}/${plan.length}`,
262            plan.map(t => (
263              <Text dimColor={t.status === 'completed'} bold={t.status === 'in_progress'} wrap="truncate-end">
264                <Text color={t.status === 'completed' ? TONE.ok : t.status === 'in_progress' ? TONE.accent : undefined}>{TODO_ICON[t.status] ?? GLYPH.off}</Text> {t.status === 'in_progress' ? (t.activeForm ?? t.content) : t.content}
265              </Text>
266            )),
267          )}
268
269        {section(
270          kit,
271          'History',
272          <Box flexDirection="column">
273            {recent.length === 0 && empty(kit, 'No tool calls yet. Every tool Claude runs shows up here with its command and how long it took.')}
274            {recent.map(c => (
275              <Box gap={1}>
276                <Text color={STATUS[c.status].color}>{STATUS[c.status].icon}</Text>
277                <Box width={7} flexShrink={0}>
278                  <Text wrap="truncate-end">{c.tool}</Text>
279                </Box>
280                {num(kit, secs((c.endedAt ?? now) - c.startedAt), 6)}
281                <Text dimColor wrap="truncate-end">
282                  {c.summary}
283                </Text>
284              </Box>
285            ))}
286          </Box>,
287          <Box gap={1}>
288            <Button key="all" plain hotkey="a" label={all ? 'main only' : 'incl. subagents'} onPress={() => void update($, showAll, v => !v)} />
289            <Button key="clear" plain hotkey="c" label="clear" onPress={() => void update($, calls, l => l.filter(c => c.status === 'running' || c.status === 'approval'))} />
290          </Box>,
291        )}
292      </Box>
293    )
294  })
295}
296

1export type CallStatus = 'running' | 'approval' | 'done' | 'failed' | 'denied'
2
3export type ActivityCall = {
4  id: string
5  tool: string
6  summary: string
7  agentId?: string
8  isBackground: boolean
9  startedAt: number
10  endedAt?: number
11  status: CallStatus
12}
13
14export type Phase = { kind: 'idle' | 'thinking' | 'tools'; since: number; prompt: string }
15
16export type Todo = { content: string; status: string; activeForm?: string }
17
18declare module 'claude-code' {
19  interface PluginState {
20    activity: {
21      calls: ActivityCall[]
22      phase: Phase
23      todos: Todo[]
24      showAll: boolean
25    }
26  }
27}
28