shell-spinners

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register, Timer } from 'claude-code'
3
4import type { Shell } from '../types'
5
6const PANE = 'shells'
7const TITLE = 'Shells'
8const FRAMES = '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏'
9const TICK_MS = 100
10
11const shells = atom({ plugin: 'shell-spinners', key: 'shells' } as const, [])
12const frame = atom({ plugin: 'shell-spinners', key: 'frame' } as const, 0)
13
14// The call's description when Claude gave one, else the command's first line.
15export const titleOf = (call: { command: string; description?: string }) =>
16  (call.description || call.command).split('\n')[0]!.trim()
17
18// A task notification names the task's id in its text, so every shell it names has ended.
19export const without = (list: readonly Shell[], notification: string) => list.filter(s => !notification.includes(s.id))
20
21let spinner: Timer | undefined
22
23// Spins while a shell runs, and stops redrawing once none does.
24async function sync($: EngineInterface, list: readonly Shell[]) {
25  if (list.length > 0 && !spinner) {
26    spinner = $.clock.every(TICK_MS, () => update($, frame, f => (f + 1) % FRAMES.length))
27    // Unasked, the pane only seats from 144 columns; /shells opens it at any width.
28    void $.ui.open({ id: PANE, title: TITLE })
29  } else if (list.length === 0 && spinner) {
30    spinner.cancel()
31    spinner = undefined
32    await $.ui.close({ id: PANE })
33  }
34}
35
36async function set($: EngineInterface, fn: (list: readonly Shell[]) => Shell[]) {
37  await update($, shells, fn)
38  await sync($, await read($, shells))
39}
40
41export const register: Register = on => {
42  on('session.start', async ($, e, next) => {
43    await $.command.register({ name: 'shells', description: 'Show the running background shells in a pane' })
44    // A reload starts the module over; pick the spinner back up for shells still listed.
45    await sync($, await read($, shells))
46    return next(e)
47  })
48
49  on('command.run', { command: 'shells' }, async $ => {
50    await $.ui.open({ id: PANE, title: TITLE })
51    return { text: 'Shells pane opened.' }
52  })
53
54  on('tool.call', async ($, e, next) => {
55    if (e.tool !== 'Bash' && e.tool !== 'PowerShell') return next(e)
56    const ran = await next(e)
57    if (ran.deny !== undefined || ran.isError) return ran
58    // Set when the call ran in the background from the start, or was moved there with ctrl+b.
59    const id = ran.result?.backgroundTaskId
60    if (id) await set($, list => [...list, { id, title: titleOf(e) }])
61    return ran
62  })
63
64  on('prompt.submit', async ($, e, next) => {
65    if (e.origin.kind === 'task-notification') await set($, list => without(list, e.text))
66    return next(e)
67  })
68
69  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
70    const { Box, Text } = $.ui.resolve(e)
71    const list = await read($, shells)
72    const spin = FRAMES[await read($, frame)]
73
74    return (
75      <Box flexDirection="column">
76        {list.length === 0 && <Text color="subtle">No shells running.</Text>}
77        {list.map(s => (
78          <Text wrap="truncate-end">
79            <Text color="warning">{spin}</Text>
80            <Text color="subtle"> {s.title}</Text>
81          </Text>
82        ))}
83      </Box>
84    )
85  })
86}
87

1// `id` is the background task id the shell's Bash or PowerShell call returned.
2export type Shell = { id: string; title: string }
3
4declare module 'claude-code' {
5  interface PluginState {
6    'shell-spinners': { shells: Shell[]; frame: number }
7  }
8}
9