mission-control

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { AgentRun, Step, Turn } from '../types'
5import {
6  BADGE,
7  MAX_TURNS,
8  bar,
9  colorOf,
10  modelTime,
11  onNewest,
12  preview,
13  relabel,
14  seconds,
15  statusOf,
16  summarize,
17  withStep,
18  withStepChange,
19} from './trace'
20
21const PANE = 'mission-control'
22const TICK_MS = 1000
23const turns = atom({ plugin: 'mission-control', key: 'turns' } as const, [])
24const back = atom({ plugin: 'mission-control', key: 'back' } as const, 0)
25const view = atom({ plugin: 'mission-control', key: 'view' } as const, 'timeline')
26
27const TURN_STATUS = { running: '● running', done: '✓ done', interrupted: '⊘ interrupted', failed: '✗ failed' } as const
28
29async function laneLabel($: EngineInterface, laneId: string): Promise<string> {
30  if (laneId === 'main') return 'Main'
31  try {
32    const agent = (await $.agent.list()).find(one => one.id === laneId)
33    if (agent !== undefined) return `${agent.name ?? agent.type}: ${agent.description}`
34  } catch {
35    // The list is a nicety; a lane without it is labelled by id.
36  }
37  return `Subagent ${laneId.slice(0, 8)}`
38}
39
40function agentRunOf(input: Record<string, unknown>, result: unknown): AgentRun {
41  const record = (result ?? {}) as Record<string, unknown>
42  const num = (key: string): number | undefined => (typeof record[key] === 'number' ? (record[key] as number) : undefined)
43  return {
44    agentId: typeof record.agentId === 'string' ? record.agentId : undefined,
45    type: typeof input.subagent_type === 'string' ? input.subagent_type : 'general-purpose',
46    description: typeof input.description === 'string' ? input.description : '',
47    toolCount: num('totalToolUseCount'),
48    tokens: num('totalTokens'),
49  }
50}
51
52export const register: Register = on => {
53  let isBusy = false
54
55  on('session.start', async ($, e, next) => {
56    await $.command.register({
57      name: 'mission',
58      description: 'Mission Control: live view of tool calls, outputs, subagents and timing',
59      immediate: true,
60    })
61    $.clock.every(TICK_MS, () => {
62      if (isBusy) $.ui.invalidate('ui.render')
63    })
64
65    return next(e)
66  })
67
68  on('turn.start', async ($, e, next) => {
69    const now = await $.clock.now()
70    const turn: Turn = {
71      id: e.turnId,
72      prompt: e.text.replace(/\s+/g, ' ').slice(0, 100),
73      startedAt: now,
74      status: 'running',
75      steps: [],
76      lanes: [{ id: 'main', label: 'Main' }],
77    }
78    await update($, turns, list => [...list, turn].slice(-MAX_TURNS))
79    await update($, back, () => 0)
80    isBusy = true
81
82    return next(e)
83  })
84
85  on('tool.call', async ($, e, next) => {
86    const input = e as unknown as Record<string, unknown>
87    const lane = e.agentId ?? 'main'
88    const now = await $.clock.now()
89    const step: Step = {
90      id: e.tool_use_id,
91      lane,
92      tool: String(e.tool),
93      summary: summarize(String(e.tool), input),
94      startedAt: now,
95      status: 'running',
96      output: '',
97    }
98    const known = (await read($, turns)).at(-1)?.lanes.some(one => one.id === lane) ?? false
99    const label = known ? '' : await laneLabel($, lane)
100    await update($, turns, list => onNewest(list, now, turn => withStep(turn, step, label)))
101    isBusy = true
102
103    const ran = await next(e)
104
105    const status = statusOf(ran)
106    const change: Partial<Step> = {
107      endedAt: await $.clock.now(),
108      status,
109      output: preview(status === 'denied' ? ran.deny : ran.text),
110    }
111    if (e.tool === 'Agent' && status === 'ok') {
112      const agent = agentRunOf(input, ran.result)
113      change.agent = agent
114      if (agent.agentId !== undefined) {
115        const label = `${agent.type}${agent.description === '' ? '' : `: ${agent.description}`}`
116        await update($, turns, list => relabel(list, agent.agentId ?? '', label))
117      }
118    }
119    await update($, turns, list => withStepChange(list, step.id, change))
120
121    return ran
122  })
123
124  on('turn.complete', async ($, e, next) => {
125    const ran = await next(e)
126    if (e.agentId !== undefined) return ran
127
128    const endedAt = await $.clock.now()
129    const status = e.reason === 'aborted' ? 'interrupted' : e.reason === 'answer' ? 'done' : 'failed'
130    await update($, turns, list =>
131      onNewest(list, endedAt, turn => ({
132        ...turn,
133        endedAt,
134        status,
135        inputTokens: e.usage?.input_tokens,
136        outputTokens: e.usage?.output_tokens,
137      })),
138    )
139    isBusy = false
140
141    return ran
142  })
143
144  on('session.end', async ($, e, next) => {
145    if (e.reason === 'clear') await update($, turns, () => [])
146
147    return next(e)
148  })
149
150  on('command.run', { command: 'mission' }, async $ => {
151    await $.ui.open({ id: PANE, title: 'Mission Control' })
152
153    return {}
154  })
155
156  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
157    const { Box, Button, Text } = $.ui.resolve(e)
158    const list = await read($, turns)
159    const offset = Math.min(await read($, back), Math.max(0, list.length - 1))
160    const turn = list[list.length - 1 - offset]
161    const mode = await read($, view)
162    const now = await $.clock.now()
163
164    if (turn === undefined) {
165      return <Text dimColor>Waiting for the next turn. Tool calls, subagents and timings appear here live.</Text>
166    }
167
168    const total = (turn.endedAt ?? now) - turn.startedAt
169    const columns = e.props.bodyColumns
170    const barWidth = Math.max(10, Math.floor(columns * 0.35))
171    const summaryWidth = Math.max(8, columns - barWidth - 24)
172    const tools = turn.steps.length
173    const failed = turn.steps.filter(step => step.status === 'error' || step.status === 'denied').length
174
175    return (
176      <Box flexDirection="column">
177        <Box flexDirection="row" gap={1}>
178          <Text bold color={turn.status === 'running' ? 'cyan' : turn.status === 'done' ? 'green' : 'yellow'}>
179            {TURN_STATUS[turn.status]}
180          </Text>
181          <Text dimColor>
182            turn {list.length - offset}/{list.length} · {seconds(total)}
183          </Text>
184        </Box>
185        <Text wrap="truncate-end">“{turn.prompt}”</Text>
186        <Text dimColor>
187          {tools} tool call{tools === 1 ? '' : 's'}
188          {failed > 0 ? ` · ${failed} failed` : ''} · {turn.lanes.length - 1} subagent
189          {turn.lanes.length === 2 ? '' : 's'} · model {seconds(modelTime(turn, now))}
190          {turn.outputTokens === undefined ? '' : ` · ${turn.inputTokens ?? 0} in / ${turn.outputTokens} out tokens`}
191        </Text>
192        {turn.lanes.map(lane => {
193          const steps = turn.steps.filter(step => step.lane === lane.id)
194          if (steps.length === 0 && lane.id !== 'main') return null
195          return (
196            <Box key={`lane-${lane.id}`} flexDirection="column" marginTop={1}>
197              <Text bold color={lane.id === 'main' ? 'white' : 'magenta'} wrap="truncate-end">
198                {lane.id === 'main' ? '▌Main' : `▌⑂ ${lane.label}`}
199              </Text>
200              {steps.length === 0 && <Text dimColor>  no tool calls yet</Text>}
201              {steps.map(step => {
202                const color = colorOf(step, now)
203                const { pad, fill } = bar(step, turn, now, barWidth)
204                return (
205                  <Box key={`step-${step.id}`} flexDirection="column">
206                    <Box flexDirection="row">
207                      <Box width={3} flexShrink={0}>
208                        <Text color={color}> {BADGE[step.status]}</Text>
209                      </Box>
210                      <Box width={12} flexShrink={0}>
211                        <Text bold wrap="truncate-end">{step.tool}</Text>
212                      </Box>
213                      <Box width={summaryWidth} flexShrink={1}>
214                        <Text dimColor wrap="truncate-end">{step.summary}</Text>
215                      </Box>
216                      {mode === 'timeline' && (
217                        <Box width={barWidth} flexShrink={0}>
218                          <Text>{pad}</Text>
219                          <Text color={color}>{fill}</Text>
220                        </Box>
221                      )}
222                      <Box width={8} flexShrink={0} justifyContent="flex-end">
223                        <Text color={color}>{seconds((step.endedAt ?? now) - step.startedAt)}</Text>
224                      </Box>
225                    </Box>
226                    {step.agent !== undefined && (
227                      <Text color="magenta">
228                        {'    '}⑂ subagent {step.agent.type}
229                        {step.agent.toolCount === undefined ? '' : ` · ${step.agent.toolCount} tools`}
230                        {step.agent.tokens === undefined ? '' : ` · ${step.agent.tokens} tokens`}
231                      </Text>
232                    )}
233                    {mode === 'details' && step.output !== '' && (
234                      <Text dimColor wrap="truncate-end">
235                        {'    ↳ '}
236                        {step.output.replace(/\n/g, ' ⏎ ')}
237                      </Text>
238                    )}
239                  </Box>
240                )
241              })}
242            </Box>
243          )
244        })}
245        <Box flexDirection="row" gap={1} marginTop={1}>
246          <Button
247            key="view"
248            label={mode === 'timeline' ? 'show outputs' : 'show timeline'}
249            hotkey="v"
250            onPress={() => update($, view, current => (current === 'timeline' ? 'details' : 'timeline'))}
251          />
252          {offset < list.length - 1 && (
253            <Button key="older" label="older turn" hotkey="o" onPress={() => update($, back, n => n + 1)} />
254          )}
255          {offset > 0 && <Button key="newer" label="newer turn" hotkey="w" onPress={() => update($, back, n => n - 1)} />}
256        </Box>
257      </Box>
258    )
259  })
260}
261

1import type { Lane, Step, StepStatus, Turn } from '../types'
2
3export const MAX_TURNS = 5
4const MAX_STEPS = 200
5const MAX_OUTPUT = 240
6
7function basename(path: string): string {
8  return path.split('/').filter(Boolean).pop() ?? path
9}
10
11function firstString(input: Record<string, unknown>): string {
12  const found = Object.values(input).find(value => typeof value === 'string')
13  return typeof found === 'string' ? found : ''
14}
15
16/** One short line saying what a tool call is about. */
17export function summarize(tool: string, input: Record<string, unknown>): string {
18  const get = (key: string): string => (typeof input[key] === 'string' ? (input[key] as string) : '')
19  switch (tool) {
20    case 'Bash':
21      return get('command')
22    case 'Read':
23    case 'Edit':
24    case 'Write':
25      return basename(get('file_path'))
26    case 'NotebookEdit':
27      return basename(get('notebook_path'))
28    case 'Grep':
29    case 'Glob':
30      return get('pattern')
31    case 'WebFetch':
32      return get('url')
33    case 'WebSearch':
34      return get('query')
35    case 'Agent':
36      return [get('subagent_type'), get('description')].filter(Boolean).join(': ')
37    case 'Skill':
38      return get('skill')
39    default:
40      return firstString(input)
41  }
42}
43
44export function preview(text: string | undefined): string {
45  const lines = (text ?? '').trim().split('\n').slice(0, 3).join('\n')
46  return lines.length > MAX_OUTPUT ? `${lines.slice(0, MAX_OUTPUT)}…` : lines
47}
48
49export function statusOf(ran: { deny?: string; isError?: true }): StepStatus {
50  if (ran.deny !== undefined) return 'denied'
51  return ran.isError === true ? 'error' : 'ok'
52}
53
54/** Applies a change to the newest turn, creating one when a tool runs before any turn started. */
55export function onNewest(turns: readonly Turn[], now: number, change: (turn: Turn) => Turn): Turn[] {
56  const newest = turns[turns.length - 1] ?? {
57    id: 'earlier',
58    prompt: '(before this view opened)',
59    startedAt: now,
60    status: 'running',
61    steps: [],
62    lanes: [{ id: 'main', label: 'Main' }],
63  }
64  return [...turns.slice(0, -1), change(newest)]
65}
66
67export function withStep(turn: Turn, step: Step, laneLabel: string): Turn {
68  const hasLane = turn.lanes.some(lane => lane.id === step.lane)
69  const lanes: Lane[] = hasLane ? turn.lanes : [...turn.lanes, { id: step.lane, label: laneLabel }]
70  return { ...turn, lanes, steps: [...turn.steps, step].slice(-MAX_STEPS) }
71}
72
73export function withStepChange(turns: readonly Turn[], id: string, change: Partial<Step>): Turn[] {
74  return turns.map(turn =>
75    turn.steps.some(step => step.id === id)
76      ? { ...turn, steps: turn.steps.map(step => (step.id === id ? { ...step, ...change } : step)) }
77      : turn,
78  )
79}
80
81export function relabel(turns: readonly Turn[], laneId: string, label: string): Turn[] {
82  return turns.map(turn => ({
83    ...turn,
84    lanes: turn.lanes.some(lane => lane.id === laneId)
85      ? turn.lanes.map(lane => (lane.id === laneId ? { ...lane, label } : lane))
86      : turn.lanes,
87  }))
88}
89
90export function seconds(ms: number): string {
91  if (ms < 1000) return `${Math.max(0, Math.round(ms))}ms`
92  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`
93  const minutes = Math.floor(ms / 60_000)
94  return `${minutes}m${String(Math.round((ms % 60_000) / 1000)).padStart(2, '0')}s`
95}
96
97/** Time the main lane spent outside tool calls: the model reading, deciding and writing. */
98export function modelTime(turn: Turn, now: number): number {
99  const end = turn.endedAt ?? now
100  const spans = turn.steps
101    .filter(step => step.lane === 'main')
102    .map(step => [step.startedAt, step.endedAt ?? now] as const)
103    .sort((a, b) => a[0] - b[0])
104  let busy = 0
105  let reach = turn.startedAt
106  for (const [start, stop] of spans) {
107    const from = Math.max(start, reach)
108    if (stop > from) busy += stop - from
109    reach = Math.max(reach, stop)
110  }
111  return Math.max(0, end - turn.startedAt - busy)
112}
113
114/** A waterfall bar: leading spaces then blocks, placed on the turn's time span. */
115export function bar(step: Step, turn: Turn, now: number, width: number): { pad: string; fill: string } {
116  const span = Math.max(1, (turn.endedAt ?? now) - turn.startedAt)
117  const start = Math.min(width - 1, Math.floor(((step.startedAt - turn.startedAt) / span) * width))
118  const length = Math.max(1, Math.round((((step.endedAt ?? now) - step.startedAt) / span) * width))
119  return { pad: ' '.repeat(Math.max(0, start)), fill: '█'.repeat(Math.min(length, width - start)) }
120}
121
122export function colorOf(step: Step, now: number): string {
123  if (step.status === 'running') return 'cyan'
124  if (step.status === 'error') return 'red'
125  if (step.status === 'denied') return 'magenta'
126  const took = (step.endedAt ?? now) - step.startedAt
127  return took >= 30_000 ? 'red' : took >= 10_000 ? 'yellow' : 'green'
128}
129
130export const BADGE: Record<StepStatus, string> = { running: '●', ok: '✓', error: '✗', denied: '⊘' }
131

1export type StepStatus = 'running' | 'ok' | 'error' | 'denied'
2
3export type AgentRun = {
4  agentId?: string
5  type: string
6  description: string
7  toolCount?: number
8  tokens?: number
9}
10
11export type Step = {
12  id: string
13  /** 'main', or the subagent's id. */
14  lane: string
15  tool: string
16  summary: string
17  startedAt: number
18  endedAt?: number
19  status: StepStatus
20  /** First lines of what the tool returned, or why it failed. */
21  output: string
22  agent?: AgentRun
23}
24
25export type Lane = { id: string; label: string }
26
27export type TurnStatus = 'running' | 'done' | 'interrupted' | 'failed'
28
29export type Turn = {
30  id: string
31  prompt: string
32  startedAt: number
33  endedAt?: number
34  status: TurnStatus
35  steps: Step[]
36  lanes: Lane[]
37  inputTokens?: number
38  outputTokens?: number
39}
40
41export type View = 'timeline' | 'details'
42
43declare module 'claude-code' {
44  interface PluginState {
45    'mission-control': {
46      /** Oldest first, newest last. */
47      turns: Turn[]
48      /** How many turns back from the newest the pane shows; 0 is the newest. */
49      back: number
50      view: View
51    }
52  }
53}
54