taxi-navi

1import type { Register } from 'claude-code'
2
3type Status = 'pending' | 'in_progress' | 'completed'
4type Stop = { id: string; subject: string; status: Status; activeForm?: string }
5type Cue = { say?: string; ding?: boolean; reroute?: boolean }
6type Line = { text: string; color?: string; bold?: boolean; dim?: boolean }
7
8const DING = 'sounds/ding.wav'
9const TODO_TOOLS_HINT =
10  'Opus 4.8·Sonnet 5·Fable 5 이후 모델은 할 일 도구가 기본으로 꺼져 있어요. CLAUDE_CODE_ENABLE_TODO_TOOLS=1 claude 로 시작하면 내비가 경로를 그립니다.'
11const REROUTE_QUIET_MS = 5_000
12const SPEAK_AFTER_DING_MS = 400
13const MAX_NODES = 12
14const GREEN = '#34c759'
15const YELLOW = '#ffcc00'
16
17const PANEL_WIDTH = 70
18const PANEL_ROWS = 3
19const TILE_WIDTH = 8
20const SCREEN = '#00005f'
21const TILE = '#005fd7'
22const TILE_RGB = 0x005fd7
23const ARRIVE_TILE = '#2c2c2e'
24const ARRIVE_TILE_RGB = 0x2c2c2e
25const ROUTE_DONE = '#5fafff'
26const ROUTE_LEFT = '#5f5f87'
27const LABEL = '#87afff'
28const WHITE = '#ffffff'
29
30const ARROWS = {
31  straight: ['.....##.....', '....####....', '...######...', '..########..', '....####....', '....####....'],
32  reroute: ['...######...', '..##....##..', '..##....##..', '######..##..', '.####...##..', '..##....##..'],
33} as const
34
35const QUADRANT = [' ', '▘', '▝', '▀', '▖', '▌', '▞', '▛', '▗', '▚', '▐', '▜', '▄', '▙', '▟', '█']
36
37const base64 = (bytes: Uint8Array) => {
38  const native = bytes as Uint8Array & { toBase64?: () => string }
39  if (native.toBase64) return native.toBase64()
40  let binary = ''
41  for (const byte of bytes) binary += String.fromCharCode(byte)
42  return btoa(binary)
43}
44
45const quadrants = (lit: (x: number, y: number) => boolean, columns: number, rows: number, on: number, off: number) => {
46  const numbers: number[] = []
47  for (let y = 0; y < rows * 2; y += 2) {
48    for (let x = 0; x < columns * 2; x += 2) {
49      const mask = (lit(x, y) ? 1 : 0) | (lit(x + 1, y) ? 2 : 0) | (lit(x, y + 1) ? 4 : 0) | (lit(x + 1, y + 1) ? 8 : 0)
50      numbers.push(QUADRANT[mask].codePointAt(0) ?? 32, on, off)
51    }
52  }
53  return { columns, rows, cells: base64(new Uint8Array(Uint32Array.from(numbers).buffer)) }
54}
55
56const arrow = (kind: keyof typeof ARROWS) => quadrants((x, y) => ARROWS[kind][y]?.[x] === '#', 6, 3, 0xffffff, TILE_RGB)
57const flag = quadrants((x, y) => x === 0 || (x >= 2 && y < 4 && (Math.floor(x / 2) + Math.floor(y / 2)) % 2 === 0), 6, 3, 0xffffff, ARRIVE_TILE_RGB)
58
59const route = (stops: Stop[], width: number, isArrived: boolean): Line[] => {
60  const focus = isArrived ? stops.length : Math.max(0, stops.findIndex((stop) => stop.status !== 'completed'))
61  const start = Math.min(Math.max(0, focus - 4), Math.max(0, stops.length - MAX_NODES))
62  const shown = stops.slice(start, start + MAX_NODES)
63  const nodes = shown.map((stop, i) =>
64    isArrived || stop.status === 'completed'
65      ? { text: '●', color: GREEN, width: 1 }
66      : start + i === focus
67        ? { text: '🚕', width: 2 }
68        : { text: '○', color: ROUTE_LEFT, width: 1 },
69  )
70  const finish = isArrived ? { text: '🏁', width: 2 } : { text: '◎', color: WHITE, width: 1 }
71  const fixed = nodes.reduce((sum, node) => sum + node.width, 0) + finish.width
72  const segment = Math.max(1, Math.min(16, Math.floor((width - fixed) / Math.max(1, shown.length))))
73  const parts: Line[] = []
74  nodes.forEach((node, i) => {
75    const isDone = isArrived || start + i < focus
76    parts.push(node, isDone ? { text: '━'.repeat(segment), color: ROUTE_DONE } : { text: '─'.repeat(segment), color: ROUTE_LEFT })
77  })
78  parts.push(finish)
79  return parts
80}
81
82const isStatus = (value: unknown): value is Status =>
83  value === 'pending' || value === 'in_progress' || value === 'completed'
84
85const minutes = (ms: number) => `${Math.max(1, Math.round(ms / 60_000))}분`
86
87const road = (stops: Stop[]): Line[] => {
88  const focus = Math.max(0, stops.findIndex((stop) => stop.status !== 'completed'))
89  const start = Math.min(Math.max(0, focus - 4), Math.max(0, stops.length - MAX_NODES))
90  const shown = stops.slice(start, start + MAX_NODES)
91  const parts: Line[] = start > 0 ? [{ text: '…━━', color: GREEN }] : []
92  shown.forEach((stop, i) => {
93    if (i > 0) parts.push(stop.status === 'pending' ? { text: '──', dim: true } : { text: '━━', color: GREEN })
94    parts.push(
95      stop.status === 'completed'
96        ? { text: '●', color: GREEN }
97        : stop.status === 'in_progress'
98          ? { text: '◉', color: YELLOW, bold: true }
99          : { text: '○', dim: true },
100    )
101  })
102  if (start + MAX_NODES < stops.length) parts.push({ text: '──…', dim: true })
103  return parts
104}
105
106export const register: Register = (on, options) => {
107  const voice = options.voice !== false
108  const voiceName =
109    typeof options.voice_name === 'string' && options.voice_name.trim() ? options.voice_name.trim() : 'Yuna'
110  const sound = options.sound !== false
111
112  let stops: Stop[] = []
113  let started = false
114  let startedAt = 0
115  let lastReroute = Number.NEGATIVE_INFINITY
116  let arrived: { count: number; ms: number } | undefined
117  const retired = new Set<string>()
118
119  const finished = (list: Stop[]) => list.filter((stop) => stop.status === 'completed').length
120
121  const arrive = (now: number): Cue => {
122    arrived = { count: stops.length, ms: now - startedAt }
123    for (const stop of stops) retired.add(stop.id)
124    stops = []
125    started = false
126    return { say: '목적지에 도착했습니다. 안내를 종료합니다.', ding: true }
127  }
128
129  const apply = (next: Stop[], now: number): Cue => {
130    const before = stops
131    stops = next
132    if (stops.length === 0) {
133      started = false
134      return {}
135    }
136    const isAllDone = finished(stops) === stops.length
137    if (!started) {
138      if (stops.every((stop) => stop.status === 'pending')) return {}
139      started = true
140      startedAt = now
141      arrived = undefined
142      return isAllDone ? arrive(now) : { say: `경로 안내를 시작합니다. 경유지 ${stops.length}곳입니다.` }
143    }
144    if (isAllDone) return arrive(now)
145    const ids = new Set(before.map((stop) => stop.id))
146    const isChanged = stops.length !== before.length || stops.some((stop) => !ids.has(stop.id))
147    if (isChanged && now - lastReroute >= REROUTE_QUIET_MS) {
148      lastReroute = now
149      return { say: `경로를 재탐색합니다. 경유지 ${stops.length}곳입니다.`, reroute: true }
150    }
151    return finished(stops) > finished(before) ? { ding: true } : {}
152  }
153
154  const report = (hasTodoTools: boolean) => {
155    if (stops.length === 0) {
156      if (arrived) return `🏁 목적지 도착 · 경유지 ${arrived.count}곳 · 소요 ${minutes(arrived.ms)}`
157      const empty = '안내 중인 경로가 없어요. Claude가 할 일 목록을 만들면 여기에 나타나요.'
158      return hasTodoTools ? empty : `${empty}\n${TODO_TOOLS_HINT}`
159    }
160    const mark = { completed: '✓', in_progress: '▶', pending: '·' } as const
161    return [`🧭 경로 안내 ${finished(stops)}/${stops.length}`, ...stops.map((stop) => `${mark[stop.status]} ${stop.subject}`)].join('\n')
162  }
163
164  on('session.start', async ($, e, next) => {
165    const result = await next(e)
166    await $.command.register({ name: 'navi', description: '택시 내비: 지금 경로(할 일 목록)와 진행 상황', immediate: true })
167    return result
168  })
169
170  on('turn.start', async ($, e, next) => {
171    if (arrived) {
172      arrived = undefined
173      $.ui.invalidate('ui.render')
174    }
175    return next(e)
176  })
177
178  on('tool.call', { tool: ['TaskCreate', 'TaskUpdate', 'TaskList', 'TodoWrite'] }, async ($, e, next) => {
179    const out = await next(e)
180    if (e.agentId || out.deny || out.isError) return out
181
182    let updated: Stop[] | undefined
183    switch (e.tool) {
184      case 'TaskCreate': {
185        const id = (out.result as { task?: { id?: string } } | undefined)?.task?.id
186        if (id) updated = [...stops, { id, subject: e.subject, status: 'pending', activeForm: e.activeForm }]
187        break
188      }
189      case 'TaskUpdate': {
190        if (e.status === 'deleted') {
191          updated = stops.filter((stop) => stop.id !== e.taskId)
192          break
193        }
194        const status = e.status
195        updated = stops.map((stop) =>
196          stop.id === e.taskId
197            ? {
198                ...stop,
199                ...(isStatus(status) ? { status } : {}),
200                ...(e.subject ? { subject: e.subject } : {}),
201                ...(e.activeForm ? { activeForm: e.activeForm } : {}),
202              }
203            : stop,
204        )
205        break
206      }
207      case 'TaskList': {
208        const tasks = (out.result as { tasks?: { id: string; subject: string; status: string }[] } | undefined)?.tasks
209        if (Array.isArray(tasks)) {
210          updated = tasks
211            .filter((task) => !retired.has(task.id) && isStatus(task.status))
212            .map((task) => ({
213              id: task.id,
214              subject: task.subject,
215              status: task.status as Status,
216              activeForm: stops.find((stop) => stop.id === task.id)?.activeForm,
217            }))
218        }
219        break
220      }
221      case 'TodoWrite': {
222        updated = e.todos
223          .map((todo) => ({ id: `todo:${todo.content}`, subject: todo.content, status: todo.status, activeForm: todo.activeForm }))
224          .filter((stop) => !retired.has(stop.id))
225        break
226      }
227    }
228    if (!updated) return out
229
230    const cue = apply(updated, await $.clock.now())
231    if (cue.reroute) $.clock.after(REROUTE_QUIET_MS, () => $.ui.invalidate('ui.render'))
232    if (cue.ding && sound) $.audio.play({ asset: DING }).catch(() => {})
233    if (cue.say && voice) {
234      const text = cue.say
235      if (cue.ding && sound) $.clock.after(SPEAK_AFTER_DING_MS, () => $.audio.speak(text, { voice: voiceName }).catch(() => {}))
236      else $.audio.speak(text, { voice: voiceName }).catch(() => {})
237    }
238    $.ui.invalidate('ui.render')
239    return out
240  })
241
242  on('command.run', { command: 'navi' }, async ($) => {
243    const flag = await $.env.get('CLAUDE_CODE_ENABLE_TODO_TOOLS')
244    return { text: report(/^(1|true)$/i.test(flag ?? '')) }
245  })
246
247  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
248    if (e.props.hasSurvey || (stops.length === 0 && !arrived)) return next(e)
249    const elements = $.ui.resolve(e)
250    const { Box, Text } = elements
251    const text = (line: Line) =>
252      Text({
253        ...(line.color ? { color: line.color } : {}),
254        ...(line.bold ? { bold: true } : {}),
255        ...(line.dim ? { dimColor: true } : {}),
256        children: [line.text],
257      })
258
259    const current = stops.find((stop) => stop.status === 'in_progress')
260    const upcoming = stops.find((stop) => stop.status === 'pending')
261    const guide = [
262      current ? `지금 ${current.activeForm || current.subject}` : undefined,
263      upcoming ? `다음 안내 ${upcoming.subject}` : undefined,
264    ]
265      .filter((part) => part !== undefined)
266      .join(' · ')
267
268    const now = await $.clock.now()
269    const panel = () => {
270      if (!('Raster' in elements) || e.props.bodyColumns < PANEL_WIDTH || e.props.maxRows < PANEL_ROWS) return undefined
271      const { Raster } = elements
272      const trip = stops.length === 0 ? arrived : undefined
273      const isArrived = trip !== undefined
274      const isRerouting = !isArrived && now - lastReroute < REROUTE_QUIET_MS
275      const list = isArrived ? [] : stops
276      const row = (left: ReturnType<typeof Text>[], right: ReturnType<typeof Text>) =>
277        Box({
278          flexDirection: 'row',
279          justifyContent: 'space-between',
280          children: [Box({ flexDirection: 'row', columnGap: 1, flexShrink: 1, children: left }), right],
281        })
282      const info = trip
283        ? [
284            row([Text({ bold: true, color: GREEN, children: ['목적지에 도착했습니다'] })], Text({ bold: true, color: WHITE, children: ['안내 종료'] })),
285            Box({ flexDirection: 'row', children: route(Array.from({ length: trip.count }, (_, i) => ({ id: String(i), subject: '', status: 'completed' as const })), PANEL_WIDTH - TILE_WIDTH - 3, true).map(text) }),
286            Text({ color: LABEL, children: [`경유지 ${trip.count}곳 · 소요 ${minutes(trip.ms)}`] }),
287          ]
288        : [
289            row(
290              [
291                Text({ color: isRerouting ? YELLOW : LABEL, bold: isRerouting, children: [isRerouting ? '경로 재탐색' : '다음 안내'] }),
292                Text({ bold: true, color: WHITE, wrap: 'truncate-end', children: [upcoming?.subject ?? '목적지'] }),
293              ],
294              Text({ bold: true, color: WHITE, children: [`경유지 ${finished(list)}/${list.length}`] }),
295            ),
296            Box({ flexDirection: 'row', children: route(list, PANEL_WIDTH - TILE_WIDTH - 3, false).map(text) }),
297            row(
298              [Text({ color: GREEN, wrap: 'truncate-end', children: [current ? `지금 ${current.activeForm || current.subject}` : '경로를 계산하고 있어요'] })],
299              Text({ color: LABEL, children: [`경과 ${minutes(startedAt ? now - startedAt : 0)}`] }),
300            ),
301          ]
302      return Box({
303        width: PANEL_WIDTH,
304        flexDirection: 'row',
305        columnGap: 1,
306        backgroundColor: SCREEN,
307        children: [
308          Box({
309            width: TILE_WIDTH,
310            paddingX: 1,
311            backgroundColor: isArrived ? ARRIVE_TILE : TILE,
312            children: [Raster({ key: 'sign', ...(isArrived ? flag : arrow(isRerouting ? 'reroute' : 'straight')) })],
313          }),
314          Box({ flexDirection: 'column', flexGrow: 1, paddingRight: 1, children: info }),
315        ],
316      })
317    }
318
319    const navi =
320      panel() ??
321      (stops.length === 0 && arrived
322        ? Text({ color: GREEN, bold: true, children: [`🏁 목적지에 도착했습니다 · 경유지 ${arrived.count}곳 · 소요 ${minutes(arrived.ms)}`] })
323        : Box({
324            flexDirection: 'column',
325            children: [
326              Box({
327                flexDirection: 'row',
328                children: [
329                  Text({ children: ['🧭 '] }),
330                  ...road(stops).map(text),
331                  Text({ bold: true, children: [`  ${finished(stops)}/${stops.length}`] }),
332                ],
333              }),
334              Text({ wrap: 'truncate-end', children: [guide || '경로를 계산하고 있어요'] }),
335            ],
336          }))
337
338    const below = await next(e)
339    return below ? Box({ flexDirection: 'column', children: [navi, below] }) : navi
340  })
341}
342