taxi-blackbox

1import type { Register } from 'claude-code'
2
3type Outcome = 'ok' | 'error' | 'denied'
4type Frame = { at: number; tool: string; what: string; outcome: Outcome; reason?: string; agentId?: string }
5
6const PANE = 'taxi-blackbox'
7const CAPACITY = 500
8const RED = '#ff3b30'
9const YELLOW = '#ffcc00'
10const GREEN = '#34c759'
11const OSD = '#1c1c1e'
12const OSD_TEXT = '#e5e5e5'
13const INK = '#111111'
14
15const TRACK_RGB = 0x111111
16const RAIL_RGB = 0x3a3a3c
17const OK_RGB = 0x8e8e93
18const WINDOW_RGB = 0xf2f2f7
19const INCIDENT_RGB = 0xff3b30
20const PICK_RGB = 0xffcc00
21
22const TOOL_COLOR: Record<string, string> = {
23  Bash: '#ff9f0a',
24  Edit: '#0a84ff',
25  Write: '#0a84ff',
26  NotebookEdit: '#0a84ff',
27  Read: '#8e8e93',
28  Grep: '#8e8e93',
29  Glob: '#8e8e93',
30  WebFetch: '#30b0c7',
31  WebSearch: '#30b0c7',
32}
33const OTHER_TOOL = '#bf5af2'
34
35const SECRETS: readonly [RegExp, string][] = [
36  [/\b((?:api[_-]?key|access[_-]?token|token|secret|password|passwd|pwd)\s*[=:]\s*)("[^"]*"|'[^']*'|[^\s"']+)/gi, '$1•••'],
37  [/\b(Bearer\s+)[A-Za-z0-9._~+/-]+=*/gi, '$1•••'],
38  [/\bsk-[A-Za-z0-9_-]{8,}/g, 'sk-•••'],
39  [/\bgh[pousr]_[A-Za-z0-9]{20,}/g, 'gh•••'],
40  [/\bxox[abprs]-[A-Za-z0-9-]{10,}/g, 'xox•••'],
41  [/\bAKIA[0-9A-Z]{16}\b/g, 'AKIA•••'],
42]
43
44const mask = (text: string) => SECRETS.reduce((out, [pattern, replacement]) => out.replace(pattern, replacement), text)
45
46const oneLine = (text: string, max: number) => {
47  const flat = text.replace(/\s+/g, ' ').trim()
48  return flat.length > max ? `${flat.slice(0, max - 1)}…` : flat
49}
50
51const pad = (n: number) => String(n).padStart(2, '0')
52const clockOf = (ms: number) => {
53  const d = new Date(ms)
54  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
55}
56const stampOf = (ms: number) => {
57  const d = new Date(ms)
58  return `${d.getFullYear()}.${pad(d.getMonth() + 1)}.${pad(d.getDate())} ${clockOf(ms)}`
59}
60const elapsed = (ms: number) => {
61  const total = Math.max(0, Math.floor(ms / 1000))
62  const h = Math.floor(total / 3600)
63  const body = `${pad(Math.floor((total % 3600) / 60))}:${pad(total % 60)}`
64  return h > 0 ? `${h}:${body}` : body
65}
66
67const describe = (e: Record<string, unknown>) => {
68  for (const field of ['command', 'file_path', 'notebook_path', 'pattern', 'url', 'query', 'description', 'subject', 'prompt']) {
69    const value = e[field]
70    if (typeof value === 'string' && value) return value
71  }
72  const question = Array.isArray(e.questions) ? (e.questions[0] as { question?: unknown } | undefined)?.question : undefined
73  return typeof question === 'string' ? question.split('\n')[0] : ''
74}
75
76const base64 = (bytes: Uint8Array) => {
77  const native = bytes as Uint8Array & { toBase64?: () => string }
78  if (native.toBase64) return native.toBase64()
79  let binary = ''
80  for (const byte of bytes) binary += String.fromCharCode(byte)
81  return btoa(binary)
82}
83
84const columnOf = (index: number, count: number, width: number) =>
85  count <= width ? index : Math.floor((index * width) / count)
86
87const timeline = (frames: Frame[], width: number, window: [number, number] | undefined, pick: number | undefined) => {
88  const cells = Array.from({ length: width }, () => ({ glyph: '▁', rgb: RAIL_RGB, rank: 0 }))
89  frames.forEach((frame, i) => {
90    const column = columnOf(i, frames.length, width)
91    const [glyph, rgb, rank] =
92      i === pick
93        ? ['█', PICK_RGB, 4]
94        : frame.outcome !== 'ok'
95          ? ['█', INCIDENT_RGB, 3]
96          : window && i >= window[0] && i < window[1]
97            ? ['▆', WINDOW_RGB, 2]
98            : ['▄', OK_RGB, 1]
99    if (rank > cells[column].rank) cells[column] = { glyph, rgb, rank }
100  })
101  const numbers = cells.flatMap((cell) => [cell.glyph.codePointAt(0) ?? 32, cell.rgb, TRACK_RGB])
102  return { columns: width, rows: 1, cells: base64(new Uint8Array(Uint32Array.from(numbers).buffer)) }
103}
104
105const reasonOf = (out: { deny?: string; isError?: boolean; result?: unknown }) => {
106  if (out.deny) return out.deny
107  if (!out.isError) return undefined
108  return typeof out.result === 'string' ? out.result : JSON.stringify(out.result ?? '')
109}
110
111export const register: Register = (on, options) => {
112  const before = typeof options.before === 'number' && options.before >= 1 ? Math.floor(options.before) : 5
113
114  const frames: Frame[] = []
115  let dropped = 0
116  let startedAt = 0
117  let blink = true
118  let isDriving = false
119  let clock: { cancel: () => void } | undefined
120  let selected: number | undefined
121
122  const incidents = () => frames.flatMap((frame, i) => (frame.outcome === 'ok' ? [] : [i]))
123
124  on('session.start', async ($, e, next) => {
125    const result = await next(e)
126    await $.command.register({ name: 'blackbox', description: '블랙박스: 사고(오류·거부) 직전 동작 돌려보기', immediate: true })
127    startedAt = await $.clock.now()
128    clock?.cancel()
129    clock = $.clock.every(1000, () => {
130      blink = isDriving ? !blink : true
131      $.ui.invalidate('ui.render')
132    })
133    return result
134  })
135
136  on('session.end', async ($, e, next) => {
137    clock?.cancel()
138    return next(e)
139  })
140
141  on('turn.start', async ($, e, next) => {
142    isDriving = true
143    return next(e)
144  })
145
146  on('turn.complete', async ($, e, next) => {
147    const result = await next(e)
148    if (!(e as { agentId?: string }).agentId) {
149      isDriving = false
150      blink = true
151      $.ui.invalidate('ui.render')
152    }
153    return result
154  })
155
156  on('tool.call', async ($, e, next) => {
157    const at = await $.clock.now()
158    const frame: Frame = {
159      at,
160      tool: e.tool,
161      what: oneLine(mask(describe(e as unknown as Record<string, unknown>)), 90),
162      outcome: 'ok',
163      ...(e.agentId ? { agentId: e.agentId } : {}),
164    }
165    const keep = () => {
166      frames.push(frame)
167      if (frames.length > CAPACITY) {
168        frames.shift()
169        dropped += 1
170      }
171      $.ui.invalidate('ui.render')
172    }
173    try {
174      const out = await next(e)
175      const reason = reasonOf(out)
176      if (out.deny) frame.outcome = 'denied'
177      else if (out.isError) frame.outcome = 'error'
178      if (reason) frame.reason = oneLine(mask(reason), 160)
179      keep()
180      return out
181    } catch (error) {
182      frame.outcome = 'error'
183      frame.reason = oneLine(mask(String(error)), 160)
184      keep()
185      throw error
186    }
187  })
188
189  on('command.run', { command: 'blackbox' }, async ($) => {
190    selected = undefined
191    await $.ui.open({ id: PANE, title: '블랙박스', focus: true, closeOnEscape: true })
192    return {}
193  })
194
195  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
196    if (e.props.hasSurvey || startedAt === 0) return next(e)
197    const { Box, Text } = $.ui.resolve(e)
198    const now = await $.clock.now()
199    const count = incidents().length
200    const rec = Box({
201      flexDirection: 'row',
202      columnGap: 1,
203      children: [
204        Text({ bold: true, color: blink ? '#ffffff' : RED, backgroundColor: blink ? RED : OSD, children: [' ● REC '] }),
205        Text({ color: OSD_TEXT, backgroundColor: OSD, children: [` ${stampOf(now)} `] }),
206        Text({ dimColor: true, children: [`${elapsed(now - startedAt)} · 기록 ${frames.length + dropped}`] }),
207        ...(count > 0 ? [Text({ bold: true, color: INK, backgroundColor: YELLOW, children: [` 사고 ${count} `] })] : []),
208        Text({ dimColor: true, children: ['/blackbox'] }),
209      ],
210    })
211    const above = await next(e)
212    return above ? Box({ flexDirection: 'column', children: [above, rec] }) : rec
213  })
214
215  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
216    if (e.requestId !== PANE) return next(e)
217    const elements = $.ui.resolve(e)
218    const { Box, Text, Button } = elements
219    const redraw = () => $.ui.invalidate('ui.render')
220    const list = incidents()
221    const pick = list.length === 0 ? undefined : Math.min(selected ?? list.length - 1, list.length - 1)
222    const width = Math.max(20, e.props.bodyColumns - 4)
223
224    const fixed = (child: ReturnType<typeof Text>) => Box({ flexShrink: 0, children: [child] })
225    const fill = (child: ReturnType<typeof Text>) => Box({ flexGrow: 1, flexShrink: 1, minWidth: 0, children: [child] })
226    const isWide = e.props.bodyColumns >= 60
227
228    const badge = (frame: Frame, isIncident: boolean) =>
229      Text({
230        bold: true,
231        color: INK,
232        backgroundColor: isIncident ? RED : (TOOL_COLOR[frame.tool] ?? OTHER_TOOL),
233        children: [` ${frame.agentId ? '↳ ' : ''}${frame.tool} `],
234      })
235
236    const line = (frame: Frame, isIncident: boolean) =>
237      Box({
238        flexDirection: 'row',
239        columnGap: 1,
240        children: [
241          fixed(Text({ dimColor: true, children: [clockOf(frame.at)] })),
242          fixed(badge(frame, isIncident)),
243          fill(Text({ wrap: 'truncate-end', ...(isIncident ? { bold: true } : { dimColor: true }), children: [frame.what || '-'] })),
244        ],
245      })
246
247    const scrubber = (window: [number, number] | undefined, at: number | undefined) => {
248      if (!('Raster' in elements) || frames.length === 0) return []
249      const caret = at === undefined ? [] : [Text({ color: YELLOW, bold: true, children: [`${' '.repeat(columnOf(at, frames.length, width))}▲`] })]
250      return [elements.Raster({ key: 'timeline', ...timeline(frames, width, window, at) }), ...caret]
251    }
252
253    const header = (mode: 'REC' | 'PLAY', title: string, stamp: number) =>
254      Box({
255        flexDirection: 'row',
256        columnGap: 1,
257        children: [
258          fixed(
259            Text({
260              bold: true,
261              color: mode === 'REC' ? '#ffffff' : INK,
262              backgroundColor: mode === 'REC' ? RED : GREEN,
263              children: [mode === 'REC' ? ' ● REC ' : ' ▶ PLAY '],
264            }),
265          ),
266          fill(Text({ bold: true, wrap: 'truncate-end', children: [title] })),
267          fixed(Text({ color: OSD_TEXT, backgroundColor: OSD, children: [` ${isWide ? stampOf(stamp) : clockOf(stamp)} `] })),
268        ],
269      })
270
271    if (pick === undefined) {
272      return Box({
273        flexDirection: 'column',
274        paddingX: 1,
275        children: [
276          header('REC', `블랙박스 · 기록 ${frames.length + dropped} · 사고 없음`, await $.clock.now()),
277          Text({ dimColor: true, children: ['오류나 거부가 생기면 그 직전 동작을 여기서 돌려볼 수 있어요. 최근 동작:'] }),
278          ...scrubber([Math.max(0, frames.length - before), frames.length], undefined),
279          ...frames.slice(-before).map((frame) => line(frame, false)),
280        ],
281      })
282    }
283
284    const at = list[pick]
285    const incident = frames[at]
286    const label = incident.outcome === 'denied' ? '거부' : '오류'
287    return Box({
288      flexDirection: 'column',
289      paddingX: 1,
290      children: [
291        header('PLAY', `사고 ${pick + 1}/${list.length} · ${incident.tool} ${label}`, incident.at),
292        ...scrubber([Math.max(0, at - before), at], at),
293        Text({ dimColor: true, children: [`직전 ${before}개 동작`] }),
294        ...frames.slice(Math.max(0, at - before), at).map((frame) => line(frame, false)),
295        Box({
296          flexDirection: 'column',
297          borderStyle: 'round',
298          borderColor: RED,
299          paddingX: 1,
300          children: [
301            fixed(Text({ bold: true, color: '#ffffff', backgroundColor: RED, children: [' 사고 장면 '] })),
302            line(incident, true),
303            Text({ color: RED, wrap: 'wrap', children: [`└ ${incident.reason ?? label}`] }),
304          ],
305        }),
306        Box({
307          flexDirection: 'row',
308          columnGap: 2,
309          children: [
310            Button({
311              key: 'prev',
312              label: '◀ 이전 사고',
313              hotkey: 'p',
314              dimColor: pick === 0,
315              onPress: () => {
316                selected = Math.max(0, pick - 1)
317                redraw()
318              },
319            }),
320            Button({
321              key: 'next',
322              label: '다음 사고 ▶',
323              hotkey: 'n',
324              dimColor: pick === list.length - 1,
325              onPress: () => {
326                selected = Math.min(list.length - 1, pick + 1)
327                redraw()
328              },
329            }),
330          ],
331        }),
332      ],
333    })
334  })
335}
336