cmd-log

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import { heading } from './kit'
5import { STRINGS } from './strings'
6
7import type { Run } from '../types'
8
9const PANE = 'cmd-log'
10const runs = atom({ plugin: 'cmd-log', key: 'runs' } as const, [])
11
12// cockpit: the language set in /cockpit (English when the hub is not installed)
13const LANG = { plugin: 'cockpit', key: 'lang' } as const
14
15const strings = async ($: EngineInterface) => STRINGS[(await $.state.get(LANG)).value ?? 'en']
16
17const begin = async ($: EngineInterface, id: string, command: string): Promise<number> => {
18  const startedAt = await $.clock.now()
19  const run: Run = { id, command: command.replace(/\s+/g, ' ').slice(0, 200), status: 'running', ms: 0 }
20  await update($, runs, list => [...list, run].slice(-200))
21
22  return startedAt
23}
24
25const finish = async ($: EngineInterface, id: string, startedAt: number, isOk: boolean) => {
26  const ms = (await $.clock.now()) - startedAt
27  await update($, runs, list =>
28    list.map(run => (run.id === id ? { ...run, status: isOk ? 'ok' : 'failed', ms } : run)),
29  )
30}
31
32const took = (ms: number): string => (ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${ms}ms`)
33
34export const register: Register = on => {
35  on('session.start', async ($, e, next) => {
36    const s = await strings($)
37    await $.command.register({ name: 'cmdlog', description: s.command })
38
39    return next(e)
40  })
41
42  on('command.run', { command: 'cmdlog' }, async $ => {
43    const s = await strings($)
44    await $.ui.open({ id: PANE, title: s.title })
45
46    return { text: s.opened }
47  })
48
49  on('tool.call', { tool: 'Bash' }, async ($, e, next) => {
50    const startedAt = await begin($, e.tool_use_id, e.command)
51    const ran = await next(e)
52    await finish($, e.tool_use_id, startedAt, ran.deny === undefined && ran.isError !== true)
53
54    return ran
55  })
56
57  on('tool.call', { tool: 'PowerShell' }, async ($, e, next) => {
58    const startedAt = await begin($, e.tool_use_id, e.command)
59    const ran = await next(e)
60    await finish($, e.tool_use_id, startedAt, ran.deny === undefined && ran.isError !== true)
61
62    return ran
63  })
64
65  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
66    const s = await strings($)
67    const ui = $.ui.resolve(e)
68    const { Box, Text } = ui
69    const list = await read($, runs)
70    const room = Math.max(1, (e.viewport?.rows ?? 24) - 6)
71    const width = Math.max(12, e.props.bodyColumns - 12)
72    const failed = list.filter(run => run.status === 'failed').length
73
74    return (
75      <Box flexDirection="column">
76        {heading(ui, 'session', s.label, s.summary(list.length, failed), e.props.bodyColumns)}
77        {list.length === 0 && <Text dimColor>{s.empty}</Text>}
78        {list.slice(-room).map(run => (
79          <Text wrap="truncate-end">
80            <Text color={run.status === 'failed' ? 'error' : run.status === 'ok' ? 'success' : 'warning'} bold>
81              {run.status === 'failed' ? '✗' : run.status === 'ok' ? '✓' : '…'}
82            </Text>{' '}
83            <Text dimColor>{(run.status === 'running' ? '' : took(run.ms)).padStart(6)}</Text>{' '}
84            <Text color={run.status === 'failed' ? 'error' : 'text'}>{run.command.slice(0, width)}</Text>
85          </Text>
86        ))}
87      </Box>
88    )
89  })
90}
91

1// Generated by the build from kit/kit.tsx. Do not edit by hand.
2import type { BoxProps, Color, ElementConstructor, RenderChildren, TextProps } from 'claude-code'
3
4// The collection's visual language: every band is an instrument row with a rail and a placard
5// in its subject's hue, then the values. Stacked, the bands line up as one panel.
6
7export type Ui = { Box: ElementConstructor<BoxProps>; Text: ElementConstructor<TextProps> }
8
9export type Group = 'git' | 'session' | 'project' | 'daily'
10
11export type Tone = 'success' | 'warning' | 'error'
12
13// Rail color per subject. Green, amber and red stay reserved for the state of a value.
14const HUE: Record<Group, Color> = { git: 'merged', session: 'claude', project: 'suggestion', daily: 'remember' }
15
16const LABEL_WIDTH = 10
17
18// Indent of continuation lines: lines up with the value column.
19export const INDENT = ' '.repeat(LABEL_WIDTH + 2)
20
21export const toneOf = (percent: number): Tone => (percent >= 85 ? 'error' : percent >= 60 ? 'warning' : 'success')
22
23// Slider gauge: a heavy stroke up to a knob, a light stroke after it. The knob is the same one
24// the settings pane uses for its switches, so every control in the collection reads alike.
25export const gauge = (percent: number, width: number): { fill: string; rest: string } => {
26  const at = Math.round((Math.min(100, Math.max(0, percent)) / 100) * (width - 1))
27
28  return { fill: `${'━'.repeat(at)}●`, rest: '─'.repeat(width - 1 - at) }
29}
30
31export const meter = (ui: Ui, percent: number, width: number, color: Color = toneOf(percent)) => {
32  const { Text } = ui
33  const { fill, rest } = gauge(percent, width)
34
35  return (
36    <Text>
37      <Text color={color}>{fill}</Text>
38      <Text dimColor>{rest}</Text>
39    </Text>
40  )
41}
42
43// One instrument row. `below` is what the other mods already drew in the band.
44export const row = (ui: Ui, group: Group, label: string, body: unknown, below?: unknown) => {
45  const { Box, Text } = ui
46
47  return (
48    <Box flexDirection="column">
49      {below as RenderChildren}
50      <Box>
51        <Text color={HUE[group]}>
52          ▍ {label.toUpperCase().slice(0, LABEL_WIDTH - 1).padEnd(LABEL_WIDTH)}
53        </Text>
54        {body as RenderChildren}
55      </Box>
56    </Box>
57  )
58}
59
60// Side pane header: a strong title, a summary and a rule.
61export const heading = (ui: Ui, group: Group, title: string, summary: string, columns: number) => {
62  const { Box, Text } = ui
63
64  return (
65    <Box flexDirection="column">
66      <Text>
67        <Text color={HUE[group]}>▍ </Text>
68        <Text bold>{title.toUpperCase()}</Text>
69        <Text dimColor>  {summary}</Text>
70      </Text>
71      <Text dimColor>{'─'.repeat(Math.max(8, Math.min(columns, 64)))}</Text>
72    </Box>
73  )
74}
75

1const en = {
2  command: 'Open the pane with the shell commands of the session, status and duration',
3  title: 'Commands',
4  opened: 'Commands pane opened.',
5  label: 'commands',
6  summary: (ran: number, failed: number) => `${ran} run · ${failed} failed`,
7  empty: 'No command run yet.',
8}
9
10type Strings = typeof en
11
12const pt: Strings = {
13  command: 'Abre o painel com os comandos de shell da sessão, status e duração',
14  title: 'Comandos',
15  opened: 'Painel de comandos aberto.',
16  label: 'comandos',
17  summary: (ran, failed) => `${ran} rodados · ${failed} com erro`,
18  empty: 'Nenhum comando executado ainda.',
19}
20
21const es: Strings = {
22  command: 'Abre el panel con los comandos de shell de la sesión, estado y duración',
23  title: 'Comandos',
24  opened: 'Panel de comandos abierto.',
25  label: 'comandos',
26  summary: (ran, failed) => `${ran} ejecutados · ${failed} con error`,
27  empty: 'Ningún comando ejecutado todavía.',
28}
29
30export const STRINGS = { en, pt, es }
31

1export type Run = {
2  id: string
3  command: string
4  status: 'running' | 'ok' | 'failed'
5  ms: number
6}
7
8declare module 'claude-code' {
9  interface PluginState {
10    'cmd-log': { runs: Run[] }
11  }
12}
13