agent-radar

1// Agent Radar: what are my subagents cooking?
2//   The band above the prompt has one live line per running subagent: status, time, tool
3//   count and what it is doing right now; a finished one shows a check for 30 s. A toast
4//   says when each finishes. /radar opens a pane with every agent and its messages.
5import { atom, read, update } from 'claude-code'
6import type { EngineInterface, Register } from 'claude-code'
7
8import type { RadarAgent } from '../types'
9
10const PANE = 'agent-radar'
11const SHOW_DONE_MS = 30_000 // a finished agent stays in the band this long
12const BAND_ROWS = 4
13
14// Held by the host, so the radar survives a hot reload of this file.
15const agents = atom({ plugin: 'agent-radar', key: 'agents' } as const, [] as RadarAgent[])
16const selected = atom({ plugin: 'agent-radar', key: 'selected' } as const, null as string | null)
17const now = atom({ plugin: 'agent-radar', key: 'now' } as const, 0)
18
19export const register: Register = on => {
20  on('session.start', async ($, e, next) => {
21    const r = await next(e)
22    await $.command.register({ name: 'radar', description: 'Show what each subagent is doing, in the Agent Radar pane' }).catch(() => {}) // a name Claude Code already has is refused: start anyway
23    // A clock for the elapsed times, ticking only while something runs.
24    $.clock.every(1000, () => {
25      void (async () => {
26        // A few seconds past the 30 s too, so the redraw that drops a finished line happens.
27        if ((await read($, agents)).some(a => isShown(a, Date.now() - 3_000))) await update($, now, () => Date.now())
28      })().catch(() => {})
29    })
30    return r
31  })
32
33  on('agent.spawn', async ($, e, next) => {
34    const r = await next(e)
35    if (r.agentId) {
36      const id = r.agentId
37      const one: RadarAgent = { id, description: e.description || e.name || e.subagentType, type: e.subagentType, status: 'running', startedAt: Date.now(), tools: 0, last: 'starting' }
38      await update($, agents, list => [one, ...list.filter(a => a.id !== id)].slice(0, 30))
39    }
40    return r
41  })
42
43  on('tool.call', async ($, e, next) => {
44    if (e.agentId) {
45      const id = e.agentId
46      const line = describe(e as unknown as Record<string, unknown>)
47      await update($, agents, list => list.map(a => (a.id === id ? { ...a, tools: a.tools + 1, last: line } : a)))
48    }
49    return next(e)
50  })
51
52  on('turn.complete', async ($, e, next) => {
53    const r = await next(e)
54    if (e.agentId) {
55      const id = e.agentId
56      const failed = e.reason === 'error' || e.reason === 'aborted'
57      const list = await update($, agents, all =>
58        all.map(a => (a.id === id ? { ...a, status: failed ? 'failed' : 'done', endedAt: Date.now(), last: failed ? `stopped: ${e.reason}` : 'finished' } : a)),
59      )
60      const one = list.find(a => a.id === id)
61      if (one) $.ui.toast(`${failed ? '✗' : '✓'} ${one.description} ${failed ? 'failed' : 'done'} (${elapsed(one)} · ${one.tools} tools)`)
62    }
63    return r
64  })
65
66  on('command.run', { command: 'radar' }, async $ => {
67    await adopt($)
68    await update($, selected, () => null)
69    await $.ui.open({ id: PANE, title: 'Agent Radar', focus: true })
70    const list = await read($, agents)
71    const running = list.filter(a => a.status === 'running').length
72    return { text: `${running} running, ${list.length - running} finished` }
73  })
74
75  // The band: one live line per running agent, and a ✓ for 30 s once one finishes.
76  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
77    const rest = await next(e) // what other mods and Claude Code draw here stays
78    await read($, now) // subscribes the band to the clock
79    const shown = (await read($, agents)).filter(a => isShown(a))
80    if (e.props.hasSurvey || shown.length === 0) return rest
81    const { Box, Text } = $.ui.resolve(e)
82    return (
83      <Box flexDirection="column">
84        {shown.slice(0, BAND_ROWS).map(a => (
85          <Text wrap="truncate-end">
86            <Text color={color(a)} bold>{` ${icon(a)} ${a.description}`}</Text>
87            <Text dimColor>{`  ${elapsed(a)} · ${a.tools} tools`}</Text>
88            {a.status === 'running' && <Text>{` · ${a.last}`}</Text>}
89            {a.status === 'failed' && <Text color="red">{` · ${a.last}`}</Text>}
90          </Text>
91        ))}
92        {shown.length > BAND_ROWS && <Text dimColor>{`   +${shown.length - BAND_ROWS} more · /radar`}</Text>}
93        {rest}
94      </Box>
95    )
96  })
97
98  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
99    const { Box, Text, Button } = $.ui.resolve(e)
100    await read($, now) // subscribes the pane to the clock
101    const list = await read($, agents)
102    const pick = await read($, selected)
103    const one = list.find(a => a.id === pick)
104
105    if (one) {
106      const found = await $.session.messages({ agentId: one.id })
107      const messages = 'deny' in found ? [] : found.slice(-6)
108      return (
109        <Box flexDirection="column">
110          <Text>
111            <Text color={color(one)} bold>{`${icon(one)} ${one.description}`}</Text>
112            <Text dimColor>{`  ${one.type} · ${elapsed(one)} · ${one.tools} tools`}</Text>
113          </Text>
114          <Text dimColor wrap="truncate-end">{`now: ${one.last}`}</Text>
115          <Text dimColor>{'─'.repeat(Math.max(10, e.props.bodyColumns - 2))}</Text>
116          {messages.length === 0 && <Text dimColor>No messages yet.</Text>}
117          {messages.map(m => (
118            <Text wrap="truncate-end">
119              <Text color={m.role === 'assistant' ? 'cyan' : undefined} bold>{m.role === 'assistant' ? 'agent: ' : 'task:  '}</Text>
120              <Text>{m.text.replace(/\s+/g, ' ').slice(0, 400) || '(tool calls)'}</Text>
121            </Text>
122          ))}
123          <Box flexDirection="row" gap={1}>
124            <Button key="back" label="Back" hotkey="b" variant="primary" onPress={() => update($, selected, () => null)} />
125            <Button key="close" label="Close" hotkey="q" role="dismiss" onPress={() => $.ui.close({ id: PANE })} />
126          </Box>
127        </Box>
128      )
129    }
130
131    const running = list.filter(a => a.status === 'running').length
132    return (
133      <Box flexDirection="column">
134        <Text bold>{`${running} running · ${list.length - running} finished`}</Text>
135        {list.length === 0 && <Text dimColor>No subagents yet this session.</Text>}
136        {list.slice(0, 9).map((a, i) => (
137          <Button
138            key={`agent-${a.id}`}
139            plain
140            hotkey={String(i + 1)}
141            dimColor={a.status !== 'running'}
142            label={`${icon(a)} ${a.description} · ${elapsed(a)} · ${a.tools} tools${a.status === 'done' ? '' : ` · ${a.last}`}`}
143            onPress={() => update($, selected, () => a.id)}
144          />
145        ))}
146        {list.length > 9 && <Text dimColor>{`… ${list.length - 9} older`}</Text>}
147        <Box flexDirection="row" gap={1}>
148          <Button key="clear" label="Clear finished" hotkey="c" onPress={() => update($, agents, all => all.filter(x => x.status === 'running'))} />
149          <Button key="close" label="Close" hotkey="q" role="dismiss" onPress={() => $.ui.close({ id: PANE })} />
150        </Box>
151      </Box>
152    )
153  })
154}
155
156// Agents that started before this mod loaded: take them from the engine's own list.
157async function adopt($: EngineInterface) {
158  const known = new Set((await read($, agents)).map(a => a.id))
159  const fresh = (await $.agent.list())
160    .filter(a => !known.has(a.id))
161    .map((a): RadarAgent => ({
162      id: a.id,
163      description: a.description,
164      type: a.type,
165      status: a.status === 'running' ? 'running' : a.status === 'completed' ? 'done' : 'failed',
166      startedAt: Date.now(),
167      tools: 0,
168      last: a.status === 'running' ? 'running (started before the radar)' : a.status,
169    }))
170  if (fresh.length > 0) await update($, agents, list => [...list, ...fresh])
171}
172
173// Running, or finished in the last 30 s.
174export function isShown(a: RadarAgent, at = Date.now()) {
175  return a.status === 'running' || (a.endedAt !== undefined && at - a.endedAt < SHOW_DONE_MS)
176}
177
178function icon(a: RadarAgent) {
179  return a.status === 'running' ? '●' : a.status === 'done' ? '✓' : '✗'
180}
181
182function color(a: RadarAgent) {
183  return a.status === 'running' ? 'yellow' : a.status === 'done' ? 'green' : 'red'
184}
185
186export function elapsed(a: Pick<RadarAgent, 'startedAt' | 'endedAt'>, at = Date.now()) {
187  const s = Math.max(0, Math.round(((a.endedAt ?? at) - a.startedAt) / 1000))
188  return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${String(s % 60).padStart(2, '0')}s`
189}
190
191// A short label for one tool call: what a person would say the agent is doing.
192export function describe(e: Record<string, unknown>): string {
193  const tool = String(e.tool)
194  const s = (k: string) => (typeof e[k] === 'string' ? (e[k] as string) : '')
195  const file = (p: string) => p.split('/').slice(-2).join('/')
196  if (tool === 'Bash') return `running ${s('description') || s('command').slice(0, 50)}`
197  if (tool === 'Edit' || tool === 'Write') return `editing ${file(s('file_path'))}`
198  if (tool === 'Read') return `reading ${file(s('file_path'))}`
199  if (tool === 'Grep' || tool === 'Glob') return `searching ${s('pattern').slice(0, 30)}`
200  if (tool.includes('playwright')) return `browser: ${tool.split('__').pop()?.replace(/^browser_/, '')}`
201  if (tool.startsWith('mcp__')) return `using ${tool.split('__').slice(1).join(' ')}`
202  return `using ${tool}`
203}
204

1export type RadarAgent = {
2  id: string
3  description: string
4  type: string
5  status: 'running' | 'done' | 'failed'
6  startedAt: number
7  endedAt?: number
8  tools: number
9  last: string
10}
11
12declare module 'claude-code' {
13  interface PluginState {
14    'agent-radar': { agents: RadarAgent[]; selected: string | null; now: number }
15  }
16}
17