taxi-meter

1import type { Register, SessionMeasureInput } from 'claude-code'
2
3type Tier = '일반' | '모범' | '블랙'
4type Limit = { kind: string; percentUsed: number; resetsAt?: string }
5type Ledger = { since: string; totalUsd: number; days: Record<string, number> }
6type Line = { text: string; color?: string; bold?: boolean; dim?: boolean }
7type State = '빈차' | '주행' | '대기' | '하차'
8type View = { usd: number; prompt: number; limits: Limit[]; model?: string; longHaul: boolean; isWorking: boolean; isDemo: boolean; speed: number; context?: number }
9type Demo = { elapsed: number; resetsAt: string; ticks: number; warned: number }
10
11const RECEIPT = 'taxi-receipt'
12const TICK = 'sounds/tick.wav'
13const CHIME = 'sounds/chime.wav'
14const LEDGER = 'ledger'
15const TRACK = 10
16const LONG_HAUL_PERCENT = 50
17const LEDGER_DAYS = 90
18const MAX_REQUESTS = 50
19const RECEIPT_REQUESTS = 5
20const DAY_MS = 86_400_000
21
22const RED = '#ff3b30'
23const YELLOW = '#ffcc00'
24const GREEN = '#34c759'
25const BAR = 10
26
27const PANEL_WIDTH = 70
28const PANEL_ROWS = 9
29const SCREEN = '#121212'
30const SCREEN_RGB = 0x121212
31const BEZEL = '#5f656d'
32const DIGIT_RGB = 0xf2f6ff
33const STOP_RGB = 0xff3b30
34const HORSE_RGB = 0x5ee35a
35const HORSE_IDLE_RGB = 0x2f7a33
36const BRAND = '#ffd60a'
37const PURPLE = '#d07cff'
38const BLUE = '#4d8dff'
39const LCD_GREEN = '#b6f24a'
40const LEGEND = '#9aa0a6'
41const KEY_TEXT = '#111111'
42
43const KEYS: readonly { label: string; on: string; off: string }[] = [
44  { label: '빈차', on: '#f4f4f4', off: '#3b3d40' },
45  { label: '주행', on: '#bdb8ff', off: '#2f2d4d' },
46  { label: '할증', on: '#ff5c8a', off: '#4a1d2a' },
47  { label: '복합', on: '#ffd60a', off: '#463b0a' },
48  { label: '지불', on: '#8fe04c', off: '#24401a' },
49]
50
51const DEMO_STEP_MS = 100
52const DEMO_BOARD_MS = 600
53const DEMO_OPUS_MS = 1_500
54const DEMO_NEAR_MS = 7_000
55const DEMO_ARRIVE_MS = 10_500
56const DEMO_USD = 34.5
57const DEMO_TICK_WON = 2_000
58const DEMO_FIVE_HOUR_FROM = 41
59const DEMO_WEEK_FROM = 23
60const DEMO_WEEK_TO = 31
61const DEMO_CONTEXT_FROM = 20
62const DEMO_CONTEXT_TO = 85
63
64const FONT: Record<string, readonly string[]> = {
65  '0': ['.#######.', '##.....##', '##.....##', '##.....##', '##.....##', '##.....##', '##.....##', '.#######.'],
66  '1': ['...###...', '.#####...', '....##...', '....##...', '....##...', '....##...', '....##...', '.#######.'],
67  '2': ['.#######.', '##.....##', '.......##', '.....###.', '...###...', '.###.....', '##.......', '#########'],
68  '3': ['.#######.', '##.....##', '.......##', '...#####.', '.......##', '.......##', '##.....##', '.#######.'],
69  '4': ['.....###.', '....####.', '...##.##.', '..##..##.', '.##...##.', '#########', '......##.', '......##.'],
70  '5': ['#########', '##.......', '##.......', '########.', '.......##', '.......##', '##.....##', '.#######.'],
71  '6': ['..######.', '.##......', '##.......', '########.', '##.....##', '##.....##', '##.....##', '.#######.'],
72  '7': ['#########', '.......##', '......##.', '.....##..', '....##...', '...##....', '...##....', '...##....'],
73  '8': ['.#######.', '##.....##', '##.....##', '.#######.', '##.....##', '##.....##', '##.....##', '.#######.'],
74  '9': ['.#######.', '##.....##', '##.....##', '##.....##', '.########', '.......##', '......##.', '.######..'],
75  ',': ['...', '...', '...', '...', '...', '.##', '.##', '##.'],
76}
77
78const HORSE: readonly (readonly string[])[] = [
79  [
80    '..................##..',
81    '................######',
82    '...............####.##',
83    '##............####....',
84    '.###############......',
85    '..#############.......',
86    '..##.##.....##.##.....',
87    '.##...##...##...##....',
88  ],
89  [
90    '..................##..',
91    '................######',
92    '...............####.##',
93    '.#............####....',
94    '################......',
95    '..#############.......',
96    '...##.##...##.##......',
97    '...##.##...##.##......',
98  ],
99].map((rows) => rows.map((row) => [...row].reverse().join('')))
100
101const QUADRANT = [' ', '▘', '▝', '▀', '▖', '▌', '▞', '▛', '▗', '▚', '▐', '▜', '▄', '▙', '▟', '█']
102
103const TIER_COLOR: Record<Tier, string> = { 일반: 'gray', 모범: YELLOW, 블랙: 'white' }
104
105const STATE_LAMP: Record<State, Line> = {
106  하차: { text: '[하차]', color: RED, bold: true },
107  주행: { text: '[주행]', color: GREEN, bold: true },
108  빈차: { text: '[빈차]', color: RED, bold: true },
109  대기: { text: '[대기]', color: YELLOW },
110}
111
112const positive = (value: unknown, fallback: number) =>
113  typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : fallback
114
115const comma = (n: number) => String(Math.round(n)).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
116
117const man = (n: number) => (n >= 10_000 ? `${comma(n / 10_000)}만` : comma(n))
118
119const pad = (n: number) => String(n).padStart(2, '0')
120
121const bar = (percent: number) => {
122  const filled = Math.min(BAR, Math.max(0, Math.floor((percent / 100) * BAR)))
123  return '█'.repeat(filled) + '░'.repeat(BAR - filled)
124}
125
126const clockOfMs = (ms: number) => {
127  const d = new Date(ms)
128  return `${pad(d.getHours())}:${pad(d.getMinutes())}`
129}
130
131const clockOf = (iso?: string) => {
132  const ms = iso ? Date.parse(iso) : Number.NaN
133  return Number.isNaN(ms) ? undefined : clockOfMs(ms)
134}
135
136const dayKey = (ms: number) => {
137  const d = new Date(ms)
138  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
139}
140
141const dateTimeOf = (iso?: string) => {
142  const ms = iso ? Date.parse(iso) : Number.NaN
143  if (Number.isNaN(ms)) return undefined
144  const d = new Date(ms)
145  return `${d.getMonth() + 1}/${d.getDate()} ${clockOfMs(ms)}`
146}
147
148const monthDay = (iso: string) => {
149  const ms = Date.parse(iso)
150  if (Number.isNaN(ms)) return '처음'
151  const d = new Date(ms)
152  return `${d.getMonth() + 1}/${d.getDate()}`
153}
154
155const duration = (ms: number) => {
156  const minutes = Math.max(0, Math.round(ms / 60_000))
157  const hours = Math.floor(minutes / 60)
158  return hours > 0 ? `${hours}시간 ${minutes % 60}분` : `${minutes}분`
159}
160
161const tierOf = (model?: string): Tier | undefined => {
162  if (!model) return undefined
163  if (/fable/i.test(model)) return '블랙'
164  if (/opus/i.test(model)) return '모범'
165  return '일반'
166}
167
168const modelName = (model?: string) => {
169  if (!model) return undefined
170  const match = /claude-([a-z]+)-(\d+)(?:-(\d{1,2}))?(?!\d)/i.exec(model)
171  if (!match) return model.replace(/\[.*\]$/, '')
172  const [, family, major, minor] = match
173  return `${family[0].toUpperCase()}${family.slice(1).toLowerCase()} ${major}${minor ? `.${minor}` : ''}`
174}
175
176const isLedger = (value: unknown): value is Ledger =>
177  typeof value === 'object' &&
178  value !== null &&
179  typeof (value as Ledger).totalUsd === 'number' &&
180  typeof (value as Ledger).since === 'string' &&
181  typeof (value as Ledger).days === 'object'
182
183const credit = (ledger: Ledger, now: number, usd: number): Ledger => {
184  const day = dayKey(now)
185  const days = Object.fromEntries(
186    Object.entries({ ...ledger.days, [day]: (ledger.days[day] ?? 0) + usd })
187      .sort(([a], [b]) => a.localeCompare(b))
188      .slice(-LEDGER_DAYS),
189  )
190  return { since: ledger.since || new Date(now).toISOString(), totalUsd: ledger.totalUsd + usd, days }
191}
192
193const base64 = (bytes: Uint8Array) => {
194  const native = bytes as Uint8Array & { toBase64?: () => string }
195  if (native.toBase64) return native.toBase64()
196  let binary = ''
197  for (const byte of bytes) binary += String.fromCharCode(byte)
198  return btoa(binary)
199}
200
201const quadrants = (bitmap: readonly string[], on: number, off: number) => {
202  const width = Math.ceil(Math.max(...bitmap.map((row) => row.length)) / 2) * 2
203  const height = Math.ceil(bitmap.length / 2) * 2
204  const lit = (x: number, y: number) => bitmap[y]?.[x] === '#'
205  const numbers: number[] = []
206  for (let y = 0; y < height; y += 2) {
207    for (let x = 0; x < width; x += 2) {
208      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)
209      numbers.push(QUADRANT[mask].codePointAt(0) ?? 32, on, off)
210    }
211  }
212  return { columns: width / 2, rows: height / 2, cells: base64(new Uint8Array(Uint32Array.from(numbers).buffer)) }
213}
214
215const fareBitmap = (text: string) => {
216  const rows = Array.from({ length: 8 }, () => '')
217  for (const char of text) {
218    const glyph = FONT[char]
219    if (!glyph) continue
220    glyph.forEach((row, y) => (rows[y] += `${row}.`))
221  }
222  return rows
223}
224
225export const register: Register = (on, options) => {
226  const rate = positive(options.krw_per_usd, 1400)
227  const style = options.style === 'compact' ? 'compact' : 'led'
228  const sound = options.sound !== false
229  const tickWon = positive(options.tick_won, 1000)
230
231  let startedAt = 0
232  let lastCostUsd = 0
233  let sessionUsd = 0
234  let requests: number[] = []
235  let limits: Limit[] = []
236  let contextPercent: number | undefined
237  let model: string | undefined
238  let frame = 0
239  let ticks = 0
240  let warned = 0
241  let longHaul = false
242  let longHaulCount = 0
243  let peakFiveHour = 0
244  let tokens = 0
245  let freshTokens = 0
246  let cachedTokens = 0
247  let speed = 0
248  const tokensByTier: Record<Tier, number> = { 일반: 0, 모범: 0, 블랙: 0 }
249  let ledger: Ledger = { since: '', totalUsd: 0, days: {} }
250  let timer: { cancel: () => void } | undefined
251  let demo: Demo | undefined
252  let demoTimer: { cancel: () => void } | undefined
253
254  const fare = (usd: number) => Math.round((usd * rate) / 10) * 10
255  const won = (usd: number) => `₩${comma(fare(usd))}`
256  const limitOf = (kind: string) => limits.find((limit) => limit.kind === kind)
257
258  const recentUsd = (now: number, days: number) => {
259    let sum = 0
260    for (let i = 0; i < days; i++) sum += ledger.days[dayKey(now - i * DAY_MS)] ?? 0
261    return sum
262  }
263
264  const promptUsd = () => requests[requests.length - 1] ?? 0
265
266  const realView = (isWorking: boolean): View => ({
267    usd: sessionUsd,
268    prompt: promptUsd(),
269    limits,
270    model,
271    longHaul,
272    isWorking,
273    isDemo: false,
274    speed: isWorking ? speed : 0,
275    context: contextPercent,
276  })
277
278  const demoView = (ride: Demo): View => {
279    const between = (from: number, to: number) => Math.min(1, Math.max(0, (ride.elapsed - from) / (to - from)))
280    const progress = between(DEMO_BOARD_MS, DEMO_ARRIVE_MS)
281    const isArrived = ride.elapsed >= DEMO_ARRIVE_MS
282    const fiveHour = isArrived
283      ? 100
284      : ride.elapsed <= DEMO_NEAR_MS
285        ? DEMO_FIVE_HOUR_FROM + (90 - DEMO_FIVE_HOUR_FROM) * between(DEMO_BOARD_MS, DEMO_NEAR_MS)
286        : 90 + 9 * between(DEMO_NEAR_MS, DEMO_ARRIVE_MS)
287    const isWorking = ride.elapsed >= DEMO_BOARD_MS && !isArrived
288    const context = DEMO_CONTEXT_FROM + (DEMO_CONTEXT_TO - DEMO_CONTEXT_FROM) * progress
289    return {
290      usd: DEMO_USD * progress,
291      prompt: 0,
292      limits: [
293        { kind: 'five_hour', percentUsed: Math.floor(fiveHour), resetsAt: ride.resetsAt },
294        { kind: 'seven_day', percentUsed: Math.floor(DEMO_WEEK_FROM + (DEMO_WEEK_TO - DEMO_WEEK_FROM) * progress) },
295      ],
296      model: ride.elapsed >= DEMO_OPUS_MS ? 'claude-opus-5-5' : undefined,
297      longHaul: context >= LONG_HAUL_PERCENT,
298      isWorking,
299      isDemo: true,
300      speed: isWorking ? 62 + 24 * Math.sin(ride.elapsed / 650) : 0,
301      context,
302    }
303  }
304
305  const endDemo = () => {
306    demoTimer?.cancel()
307    demoTimer = undefined
308    demo = undefined
309  }
310
311  const stateOf = (view: View): State => {
312    const isOut = view.limits.some((limit) => (limit.kind === 'five_hour' || limit.kind === 'seven_day') && limit.percentUsed >= 100)
313    if (isOut) return '하차'
314    if (view.isWorking) return '주행'
315    return view.usd === 0 ? '빈차' : '대기'
316  }
317
318  const status = (view: View): Line => STATE_LAMP[stateOf(view)]
319
320  const lamps = (view: View): Line[] => {
321    const tier = tierOf(view.model)
322    return [
323      status(view),
324      ...(tier ? [{ text: `[${tier}]`, color: TIER_COLOR[tier], bold: tier !== '일반' }] : []),
325      ...(view.longHaul ? [{ text: '[장거리]', color: 'cyan' }] : []),
326    ]
327  }
328
329  const limitLine = (view: View): Line => {
330    const find = (kind: string) => view.limits.find((limit) => limit.kind === kind)
331    const five = find('five_hour')
332    const week = find('seven_day')
333    const credit = find('spend_limit')
334    if (!five && !week && !credit) return { text: '한도는 첫 응답 뒤에 표시돼요', dim: true }
335    const reset = clockOf(five?.resetsAt)
336    if (five && five.percentUsed >= 100) {
337      return { text: `하차하셔야 합니다${reset ? ` · ${reset} 재승차` : ''}`, color: RED, bold: true }
338    }
339    if (week && week.percentUsed >= 100) {
340      const weekReset = dateTimeOf(week.resetsAt)
341      return { text: `하차하셔야 합니다 · 주간 한도${weekReset ? ` · ${weekReset} 재승차` : ''}`, color: RED, bold: true }
342    }
343    const text = [
344      five ? `5시간 ${bar(five.percentUsed)} ${five.percentUsed}%${reset ? ` · ${reset} 리셋` : ''}` : undefined,
345      week ? `주간 ${week.percentUsed}%` : undefined,
346      credit ? `크레딧 한도 ${credit.percentUsed}%` : undefined,
347    ]
348      .filter((part) => part !== undefined)
349      .join(' │ ')
350    if ((five && five.percentUsed >= 90) || (week && week.percentUsed >= 90)) {
351      return { text: `곧 목적지입니다 · ${text}`, color: YELLOW, bold: true }
352    }
353    return { text }
354  }
355
356  const track = () => {
357    const horse = TRACK - 1 - (frame % TRACK)
358    return Array.from({ length: TRACK }, (_, i) => (i === horse ? '🐎' : '·')).join('')
359  }
360
361  const report = (now: number) => {
362    const five = limitOf('five_hour')
363    const week = limitOf('seven_day')
364    return [
365      '🚕 클로드 택시 미터기',
366      `이번 승차 ${won(sessionUsd)} (API 정가 환산 $${sessionUsd.toFixed(2)} · 환율 ${comma(rate)}원)`,
367      `방금 요청 ${requests.length > 0 ? `+${won(promptUsd())}` : '-'} · 요청 ${requests.length}건`,
368      `오늘 ${won(recentUsd(now, 1))} · 최근 7일 ${won(recentUsd(now, 7))} · ${monthDay(ledger.since)}부터 ${won(ledger.totalUsd)}`,
369      five || week ? limitLine(realView(false)).text : '한도: 아직 응답이 없어요',
370      `차종 ${tierOf(model) ?? '-'}${model ? ` (${model})` : ''} · 컨텍스트 ${contextPercent === undefined ? '-' : `${contextPercent}%`}`,
371    ].join('\n')
372  }
373
374  const requestsLine = () => {
375    if (requests.length === 0) return '-'
376    const recent = requests.slice(-RECEIPT_REQUESTS).map((usd) => won(usd)).join(' · ')
377    return requests.length > RECEIPT_REQUESTS ? `${requests.length}건 · 최근 ${recent}` : `${requests.length}건 · ${recent}`
378  }
379
380  const shares = () => {
381    const total = tokens || 1
382    const parts = (Object.entries(tokensByTier) as [Tier, number][])
383      .filter(([, n]) => n > 0)
384      .map(([tier, n]) => `${tier} ${Math.round((n / total) * 100)}%`)
385    return parts.length > 0 ? parts.join(' · ') : '-'
386  }
387
388  on('session.start', async ($, e, next) => {
389    const result = await next(e)
390    await $.command.register({
391      name: 'meter',
392      description: '택시 미터기: 이번 승차(세션)·방금 요청·오늘·누적 요금과 한도 (reset은 미터기와 누적 초기화, demo는 촬영용 데모 주행)',
393      argumentHint: '[reset|demo]',
394      immediate: true,
395    })
396    await $.command.register({ name: 'receipt', description: '택시 영수증 열기', immediate: true })
397    const now = await $.clock.now()
398    const saved = await $.store.get(LEDGER)
399    ledger = isLedger(saved) ? saved : { since: new Date(now).toISOString(), totalUsd: 0, days: {} }
400    const usage = await $.session.usage()
401    startedAt = now
402    lastCostUsd = usage.cost?.usd ?? 0
403    limits = [...usage.rateLimits]
404    contextPercent = usage.context.percent
405    return result
406  })
407
408  on('classic.SessionStart', async ($, e, next) => {
409    if (e.model) model = e.model
410    if (e.source === 'clear') {
411      sessionUsd = 0
412      requests = []
413      ticks = 0
414    }
415    $.ui.invalidate('ui.render')
416    return next(e)
417  })
418
419  on('classic.PostModelSwitch', async ($, e, next) => {
420    model = e.to_model
421    const recache = fare(e.estimated_cache_write_usd ?? 0)
422    if (recache >= 10) {
423      $.ui.toast(`차종 변경: ${tierOf(e.to_model) ?? '-'} · 다음 요청에 재캐시 약 ₩${comma(recache)} 붙어요`, { timeoutMs: 8000 })
424    }
425    $.ui.invalidate('ui.render')
426    return next(e)
427  })
428
429  on('session.end', async ($, e, next) => {
430    timer?.cancel()
431    endDemo()
432    return next(e)
433  })
434
435  on('turn.start', async ($, e, next) => {
436    endDemo()
437    if (e.text) requests = [...requests, 0].slice(-MAX_REQUESTS)
438    timer?.cancel()
439    timer = $.clock.every(250, () => {
440      frame += 1
441      $.ui.invalidate('ui.render')
442    })
443    $.ui.invalidate('ui.render')
444    return next(e)
445  })
446
447  on('turn.complete', async ($, e, next) => {
448    const result = await next(e)
449    if (!(e as { agentId?: string }).agentId) {
450      timer?.cancel()
451      timer = undefined
452      $.ui.invalidate('ui.render')
453    }
454    return result
455  })
456
457  on('turn.step', async function* ($, e, next) {
458    if (!e.agentId) model = e.model
459    const stepStartedAt = await $.clock.now()
460    const result = yield* next(e)
461    const usage = result.usage
462    const seconds = ((await $.clock.now()) - stepStartedAt) / 1000
463    if (!e.agentId && usage?.output_tokens && seconds > 0) speed = usage.output_tokens / seconds
464    if (usage) {
465      const used =
466        (usage.input_tokens ?? 0) +
467        (usage.output_tokens ?? 0) +
468        (usage.cache_read_input_tokens ?? 0) +
469        (usage.cache_creation_input_tokens ?? 0)
470      tokens += used
471      cachedTokens += usage.cache_read_input_tokens ?? 0
472      freshTokens += used - (usage.cache_read_input_tokens ?? 0)
473      tokensByTier[tierOf(usage.model ?? e.model) ?? '일반'] += used
474    }
475    if (!e.agentId) {
476      const { delta, isTick, isChime } = absorb(await $.session.usage(), await $.clock.now())
477      if (delta > 0) {
478        const saved = await $.store.get(LEDGER)
479        ledger = credit(isLedger(saved) ? saved : ledger, await $.clock.now(), delta)
480        await $.store.set(LEDGER, ledger)
481      }
482      if (isTick && sound) $.audio.play({ asset: TICK }).catch(() => {})
483      if (isChime && sound) $.audio.play({ asset: CHIME }).catch(() => {})
484      $.ui.invalidate('ui.render')
485    }
486    return result
487  })
488
489  const absorb = (m: Pick<SessionMeasureInput, 'context' | 'rateLimits' | 'cost'>, now: number) => {
490    limits = [...m.rateLimits]
491    contextPercent = m.context.percent ?? contextPercent
492    const isLong = (contextPercent ?? 0) >= LONG_HAUL_PERCENT
493    if (isLong && !longHaul) longHaulCount += 1
494    longHaul = isLong
495
496    const five = limitOf('five_hour')
497    if (five) peakFiveHour = Math.max(peakFiveHour, five.percentUsed)
498
499    const costUsd = m.cost?.usd
500    const isNewRide = costUsd !== undefined && costUsd < lastCostUsd
501    const delta = costUsd === undefined ? 0 : isNewRide ? costUsd : costUsd - lastCostUsd
502    if (costUsd !== undefined) lastCostUsd = costUsd
503    if (isNewRide) {
504      sessionUsd = 0
505      requests = []
506      ticks = 0
507      startedAt = now
508      tokens = 0
509      tokensByTier.일반 = tokensByTier.모범 = tokensByTier.블랙 = 0
510      longHaulCount = 0
511      peakFiveHour = 0
512    }
513    sessionUsd += delta
514    if (delta > 0 && requests.length > 0) requests = [...requests.slice(0, -1), promptUsd() + delta]
515    const step = Math.floor(fare(sessionUsd) / tickWon)
516    const isTick = step > ticks
517    if (isTick) ticks = step
518
519    const used = Math.max(five?.percentUsed ?? 0, limitOf('seven_day')?.percentUsed ?? 0)
520    const level = used >= 100 ? 100 : used >= 90 ? 90 : 0
521    const isChime = level > warned
522    warned = level
523    return { delta, isTick, isChime }
524  }
525
526  on('session.measure', async ($, e, next) => {
527    const result = await next(e)
528    const { delta, isTick, isChime } = absorb(e, await $.clock.now())
529    if (delta > 0) {
530      const saved = await $.store.get(LEDGER)
531      ledger = credit(isLedger(saved) ? saved : ledger, await $.clock.now(), delta)
532      await $.store.set(LEDGER, ledger)
533    }
534    if (isTick && sound) $.audio.play({ asset: TICK }).catch(() => {})
535    if (isChime && sound) $.audio.play({ asset: CHIME }).catch(() => {})
536    $.ui.invalidate('ui.render')
537    return result
538  })
539
540  on('command.run', { command: 'meter' }, async ($, e) => {
541    const now = await $.clock.now()
542    const arg = e.args.trim()
543    if (arg === 'reset') {
544      ledger = { since: new Date(now).toISOString(), totalUsd: 0, days: {} }
545      await $.store.set(LEDGER, ledger)
546      sessionUsd = 0
547      requests = []
548      ticks = 0
549      endDemo()
550      $.ui.invalidate('ui.render')
551      return { text: '미터기와 누적 요금을 0원으로 초기화했어요.' }
552    }
553    if (arg === 'demo') {
554      if (demo) {
555        endDemo()
556        $.ui.invalidate('ui.render')
557        return { text: '데모 주행을 끝내고 실제 미터기로 돌아왔어요.' }
558      }
559      const reset = new Date(now)
560      reset.setHours(reset.getHours() + 4, 0, 0, 0)
561      demo = { elapsed: 0, resetsAt: reset.toISOString(), ticks: 0, warned: 0 }
562      frame = 0
563      demoTimer = $.clock.every(DEMO_STEP_MS, () => {
564        if (!demo) return
565        demo.elapsed += DEMO_STEP_MS
566        const view = demoView(demo)
567        if (view.isWorking) frame += 1
568        const step = Math.floor(fare(view.usd) / DEMO_TICK_WON)
569        if (step > demo.ticks) {
570          demo.ticks = step
571          if (sound) $.audio.play({ asset: TICK }).catch(() => {})
572        }
573        const five = view.limits[0].percentUsed
574        const level = five >= 100 ? 100 : five >= 90 ? 90 : 0
575        if (level > demo.warned) {
576          demo.warned = level
577          if (sound) $.audio.play({ asset: CHIME }).catch(() => {})
578        }
579        if (demo.elapsed >= DEMO_ARRIVE_MS) {
580          demoTimer?.cancel()
581          demoTimer = undefined
582        }
583        $.ui.invalidate('ui.render')
584      })
585      $.ui.invalidate('ui.render')
586      return {}
587    }
588    return { text: report(now) }
589  })
590
591  on('command.run', { command: 'receipt' }, async ($) => {
592    await $.ui.open({ id: RECEIPT, title: '영수증', focus: true, closeOnEscape: true, columns: 56 })
593    return {}
594  })
595
596  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
597    if (e.props.hasSurvey) return next(e)
598    const elements = $.ui.resolve(e)
599    const { Box, Text } = elements
600    const text = (line: Line) =>
601      Text({
602        ...(line.color ? { color: line.color } : {}),
603        ...(line.bold ? { bold: true } : {}),
604        ...(line.dim ? { dimColor: true } : {}),
605        children: [line.text],
606      })
607    const view = demo ? demoView(demo) : realView(e.props.isWorking)
608    const lampRow = lamps(view).map(text)
609    const limit = text(limitLine(view))
610    const horse = Text({ children: [track()] })
611
612    const panel = () => {
613      if (!('Raster' in elements)) return undefined
614      const { Raster } = elements
615      const state = stateOf(view)
616      const tier = tierOf(view.model)
617      const lit = [
618        state === '빈차',
619        state === '주행',
620        tier === '모범' || tier === '블랙',
621        view.longHaul,
622        state === '대기' || state === '하차',
623      ]
624      const cell = (width: number, children: ReturnType<typeof Text>[]) =>
625        Box({ width, flexDirection: 'column', children })
626      const blank = Text({ children: [' '] })
627      const legend = limitLine(view)
628
629      return Box({
630        width: PANEL_WIDTH,
631        flexDirection: 'column',
632        borderStyle: 'round',
633        borderColor: BEZEL,
634        backgroundColor: SCREEN,
635        paddingX: 1,
636        children: [
637          Box({
638            flexDirection: 'row',
639            justifyContent: 'space-between',
640            children: [
641              Box({
642                flexDirection: 'row',
643                columnGap: 3,
644                children: [
645                  Text({ color: BRAND, bold: true, children: ['클로드·택시+'] }),
646                  Text({ color: BLUE, bold: true, children: [tier ?? '--'] }),
647                  Text({ color: '#ffffff', children: [modelName(view.model) ?? '모델 확인 중'] }),
648                  Text({ color: LCD_GREEN, bold: true, children: [`${view.speed.toFixed(1)} tok/s`] }),
649                ],
650              }),
651              view.prompt > 0
652                ? Text({ color: LCD_GREEN, bold: true, children: [`방금 요청 +${won(view.prompt)}`] })
653                : Text({ color: LEGEND, children: ['ELECTRONIC TAXIMETER'] }),
654            ],
655          }),
656          Box({
657            flexDirection: 'row',
658            columnGap: 1,
659            children: [
660              cell(11, [
661                Raster({
662                  key: 'horse',
663                  ...quadrants(HORSE[view.isWorking ? frame % HORSE.length : 0], view.isWorking ? HORSE_RGB : HORSE_IDLE_RGB, SCREEN_RGB),
664                }),
665              ]),
666              Box({
667                flexGrow: 1,
668                flexDirection: 'row',
669                justifyContent: 'flex-end',
670                children: [
671                  Raster({ key: 'fare', ...quadrants(fareBitmap(comma(fare(view.usd))), state === '하차' ? STOP_RGB : DIGIT_RGB, SCREEN_RGB) }),
672                ],
673              }),
674              cell(5, [blank, Text({ color: '#ffffff', bold: true, children: ['원'] }), Text({ color: LEGEND, children: ['(WON)'] })]),
675              cell(8, [
676                blank,
677                Text({ color: LCD_GREEN, bold: true, children: [view.context === undefined ? '--%' : `${Math.round(view.context)}%`] }),
678                Text({ color: LEGEND, children: ['컨텍스트'] }),
679              ]),
680            ],
681          }),
682          Box({
683            flexDirection: 'row',
684            columnGap: 1,
685            children: [
686              Text({ color: '#ffffff', backgroundColor: BLUE, bold: true, children: [` ${state} `] }),
687              Text({
688                color: legend.color ?? PURPLE,
689                ...(legend.bold ? { bold: true } : {}),
690                wrap: 'truncate-end',
691                children: [legend.text],
692              }),
693            ],
694          }),
695          Box({
696            flexDirection: 'row',
697            justifyContent: 'space-between',
698            children: [
699              Box({
700                flexDirection: 'row',
701                columnGap: 1,
702                children: KEYS.map((key, i) =>
703                  Text({
704                    color: lit[i] ? KEY_TEXT : LEGEND,
705                    backgroundColor: lit[i] ? key.on : key.off,
706                    bold: lit[i],
707                    children: [`  ${key.label}  `],
708                  }),
709                ),
710              }),
711              Text({ color: LEGEND, children: [view.isDemo ? '데모 주행' : 'API 정가 환산'] }),
712            ],
713          }),
714        ],
715      })
716    }
717
718    const fits = e.surface === 'terminal' && e.props.bodyColumns >= PANEL_WIDTH && e.props.maxRows >= PANEL_ROWS
719    const meter =
720      (style === 'led' && fits ? panel() : undefined) ??
721      Box({
722        flexDirection: 'row',
723        columnGap: 1,
724        children: [
725          Text({ color: RED, bold: true, children: [won(view.usd)] }),
726          ...(view.prompt > 0 ? [Text({ dimColor: true, children: [`방금 +${won(view.prompt)}`] })] : []),
727          ...lampRow,
728          ...(view.model ? [Text({ dimColor: true, children: [modelName(view.model) ?? ''] })] : []),
729          horse,
730          limit,
731          ...(view.isDemo ? [Text({ dimColor: true, children: ['데모 주행'] })] : []),
732        ],
733      })
734
735    const below = await next(e)
736    return below ? Box({ flexDirection: 'column', children: [meter, below] }) : meter
737  })
738
739  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
740    if (e.requestId !== RECEIPT) return next(e)
741    const { Box, Text } = $.ui.resolve(e)
742    const now = await $.clock.now()
743    const row = (label: string, ...values: ReturnType<typeof Text>[]) =>
744      Box({ flexDirection: 'row', columnGap: 1, children: [Box({ width: 7, children: [Text({ dimColor: true, children: [label] })] }), ...values] })
745    const plain = (value: string) => Text({ children: [value] })
746    const rule = Text({ dimColor: true, children: ['─'.repeat(48)] })
747    return Box({
748      flexDirection: 'column',
749      paddingX: 1,
750      children: [
751        Box({
752          flexDirection: 'row',
753          columnGap: 2,
754          children: [Text({ bold: true, children: ['영  수  증'] }), Text({ dimColor: true, children: [`클로드 택시 · ${dayKey(now)}`] })],
755        }),
756        rule,
757        row('승하차', plain(`${clockOfMs(startedAt)} → ${clockOfMs(now)} (${duration(now - startedAt)})`)),
758        row('주행', plain(`새로 처리 ${man(freshTokens)} 토큰`)),
759        row('', plain(`캐시 재사용 ${man(cachedTokens)} 토큰`)),
760        row('차종', plain(shares())),
761        row(
762          '요금',
763          Text({ bold: true, color: RED, children: [won(sessionUsd)] }),
764          Text({ dimColor: true, children: [`API 정가 $${sessionUsd.toFixed(2)} · 환율 ${comma(rate)}원`] }),
765        ),
766        row('요청', plain(requestsLine())),
767        row('', Text({ dimColor: true, children: ['제목 생성 같은 숨은 호출 포함'] })),
768        row('표시등', plain(`장거리 ${longHaulCount}회 · 5시간 최고 ${peakFiveHour}%`)),
769        row('누적', plain(`오늘 ${won(recentUsd(now, 1))} · ${monthDay(ledger.since)}부터 ${won(ledger.totalUsd)}`)),
770        rule,
771        Text({ children: ['이용해 주셔서 감사합니다'] }),
772      ],
773    })
774  })
775}
776