fuel-bar

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { FuelQuota, FuelSnapshot } from '../types'
5import { baseName, cellWidth, fitCells, shortNote, tempLabel, WEATHER_COLOR, WEATHER_GLYPH, WEATHER_TH, weatherKind, workedLabel } from './project'
6import type { Weather } from './project'
7
8const snapshot = atom({ plugin: 'fuel-bar', key: 'snapshot' } as const, null)
9const thaiOn = atom({ plugin: 'thai-mode', key: 'enabled' } as const, false)
10const weather = atom({ plugin: 'fuel-bar', key: 'weather' } as const, null)
11const toast = atom({ plugin: 'fuel-bar', key: 'toast' } as const, null)
12const frame = atom({ plugin: 'fuel-bar', key: 'frame' } as const, 0)
13const startedAt = atom({ plugin: 'fuel-bar', key: 'startedAt' } as const, 0)
14
15const TOAST_MS = 8000
16const WEATHER_MS = 30 * 60_000
17
18const HINT_TH: Array<[RegExp, string]> = [
19  [/\? for shortcuts/i, '? ดูคีย์ลัด'],
20  [/esc to interrupt/i, 'esc หยุด'],
21  [/for agents/i, 'ดู agents'],
22  [/ctrl\+c again to exit/i, 'กด ctrl+c อีกครั้งเพื่อออก'],
23  [/esc again to clear/i, 'กด esc อีกครั้งเพื่อล้าง'],
24]
25
26export function thaiHint(hint: string): string {
27  return HINT_TH.reduce((h, [re, th]) => h.replace(re, th), hint)
28}
29
30const C = {
31  fg: '#2d2a24',
32  dim: '#6b675e',
33  faint: '#b9b5a3',
34  off: '#d2ceb4',
35  pillBg: '#3a3a3a',
36  pillFg: '#e0e0e0',
37  green: '#3f8a3a',
38  name: '#c25a2c',
39  yellow: '#a06c00',
40  red: '#b8322b',
41}
42
43const MODE_LABEL: Record<string, string> = {
44  auto: 'AUTO',
45  acceptEdits: 'EDITS',
46  plan: 'PLAN',
47  bypassPermissions: 'BYPASS',
48  dontAsk: 'DONT ASK',
49}
50
51const GAUGE_CELLS = 12
52
53type Seg = { text: string; color?: string; bg?: string; bold?: boolean }
54
55export function prettyModel(id: string): string {
56  const m = id.match(/(opus|sonnet|haiku|fable)[-_ ]?(\d+)(?:[-.](\d+))?/i)
57  if (!m || !m[1]) return id.replace(/\[.*\]$/, '')
58  const name = m[1].charAt(0).toUpperCase() + m[1].slice(1).toLowerCase()
59  return m[3] ? `${name} ${m[2]}.${m[3]}` : `${name} ${m[2]}`
60}
61
62export function shortTokens(n: number): string {
63  if (n >= 1_000_000) return `${+(n / 1_000_000).toFixed(n % 1_000_000 === 0 ? 0 : 1)}M`
64  return `${(n / 1000).toFixed(1)}k`
65}
66
67export function untilReset(iso: string | undefined, now: number): string | undefined {
68  if (!iso) return undefined
69  const ms = Date.parse(iso) - now
70  if (!Number.isFinite(ms) || ms <= 0) return undefined
71  const mins = Math.floor(ms / 60_000)
72  const d = Math.floor(mins / 1440)
73  const h = Math.floor((mins % 1440) / 60)
74  const m = mins % 60
75  if (d > 0) return h > 0 ? `${d}d${h}h` : `${d}d`
76  if (h > 0) return m > 0 ? `${h}h${m}m` : `${h}h`
77  return `${m}m`
78}
79
80export function modeFromHint(hint: string): string | undefined {
81  const s = hint.toLowerCase()
82  if (s.includes('auto mode')) return 'auto'
83  if (s.includes('accept edits')) return 'acceptEdits'
84  if (s.includes('plan mode')) return 'plan'
85  if (s.includes('bypass permissions')) return 'bypassPermissions'
86  if (s.includes("don't ask") || s.includes('dont ask')) return 'dontAsk'
87  return undefined
88}
89
90export function stripModePill(hint: string): string {
91  return hint
92    .replace(/[⏵⏸▶►]+\s*[^·(]*?(mode|edits|permissions|ask)\s+on\b/gi, '')
93    .replace(/\(shift\+tab to cycle\)/gi, '')
94    .replace(/\s{2,}/g, '  ')
95    .trim()
96    .replace(/^[·\s]+|[·\s]+$/g, '')
97}
98
99const gaugeColor = (pct: number) => (pct > 85 ? C.red : pct >= 60 ? C.yellow : C.green)
100const quotaColor = gaugeColor
101
102export function buildLines(s: FuelSnapshot, mode: string | undefined, hint: string, columns: number, now: number): Seg[][] {
103  const sep: Seg = { text: ' │ ', color: C.faint }
104  const head: Seg[] = []
105  const label = mode ? MODE_LABEL[mode] : undefined
106  if (label) head.push({ text: ` ${label} `, color: C.pillFg, bg: C.pillBg, bold: true }, { text: ' ' })
107  head.push({ text: `T${s.turn}`, color: C.fg, bold: true }, sep, { text: s.model, color: C.fg })
108  if (s.effort) head.push({ text: ` · ${s.effort}`, color: C.dim })
109
110  const gauge: Seg[] = []
111  if (s.tokens === undefined) {
112    gauge.push({ text: '━'.repeat(GAUGE_CELLS), color: C.off }, { text: ' —', color: C.dim })
113  } else {
114    const limit = s.threshold && s.threshold > 0 ? s.threshold : s.window
115    const pct = Math.round((s.tokens / limit) * 1000) / 10
116    const filled = Math.max(0, Math.min(GAUGE_CELLS, Math.round((pct / 100) * GAUGE_CELLS)))
117    const color = gaugeColor(pct)
118    gauge.push(
119      { text: '━'.repeat(filled), color },
120      { text: '━'.repeat(GAUGE_CELLS - filled), color: C.off },
121      { text: ` ${pct.toFixed(1)}%`, color, bold: true },
122      { text: ` ${shortTokens(s.tokens)}/${shortTokens(s.window)}`, color: C.dim },
123    )
124  }
125
126  const quota = (name: string, q: FuelQuota | undefined, withReset: boolean): Seg[] => {
127    if (!q) return []
128    const out: Seg[] = [{ text: `${name} `, color: C.dim }, { text: `${q.percent.toFixed(1)}%`, color: quotaColor(q.percent) }]
129    const left = withReset ? untilReset(q.resetsAt, now) : undefined
130    if (left) out.push({ text: ` (${left})`, color: C.dim })
131    return out
132  }
133  const quotas = (withReset: boolean): Seg[] => {
134    const a = quota('5h', s.fiveHour, withReset)
135    const b = quota('7D', s.sevenDay, withReset)
136    if (!a.length && !b.length) return []
137    return [sep, ...a, ...(a.length && b.length ? [{ text: ' · ', color: C.dim }] : []), ...b]
138  }
139  const hintSegs: Seg[] = hint ? [{ text: `   ${hint}`, color: C.faint }] : []
140
141  const width = (segs: Seg[]) => segs.reduce((n, x) => n + [...x.text].length, 0) + 1
142  const tries: Seg[][] = [
143    [...head, sep, ...gauge, ...quotas(true), ...hintSegs],
144    [...head, sep, ...gauge, ...quotas(true)],
145    [...head, sep, ...gauge, ...quotas(false)],
146    [...head, sep, ...gauge],
147  ]
148  for (const line of tries) if (width(line) <= columns) return [line]
149  return [head, gauge]
150}
151
152async function refresh($: EngineInterface, patch: Partial<FuelSnapshot>) {
153  const [turn, model] = await Promise.all([$.session.turns(), $.session.model()])
154  await update($, snapshot, prev => ({
155    window: 0,
156    ...(prev ?? {}),
157    ...patch,
158    turn,
159    model: prettyModel(model),
160  }))
161}
162
163async function trackMode($: EngineInterface, mode: unknown) {
164  if (typeof mode !== 'string') return
165  const s = await read($, snapshot)
166  if (s && s.permissionMode !== mode) await update($, snapshot, p => (p ? { ...p, permissionMode: mode } : p))
167}
168
169let lastHint = ''
170let cwd = ''
171
172async function loadWeather($: EngineInterface) {
173  const cached = (await $.store.get('weather')) as Weather | undefined
174  if (cached && Date.now() - cached.at < WEATHER_MS) {
175    await update($, weather, () => cached)
176    return
177  }
178  try {
179    const geo = JSON.parse((await $.http.fetch('https://ipwho.is/')).text) as { latitude?: number; longitude?: number; city?: string }
180    if (typeof geo.latitude !== 'number' || typeof geo.longitude !== 'number') return
181    const url =
182      `https://api.open-meteo.com/v1/forecast?latitude=${geo.latitude}&longitude=${geo.longitude}` +
183      '&current=temperature_2m,relative_humidity_2m,weather_code,is_day&hourly=precipitation_probability&forecast_hours=3&timezone=auto'
184    const om = JSON.parse((await $.http.fetch(url)).text) as {
185      current?: { temperature_2m: number; relative_humidity_2m: number; weather_code: number; is_day: number }
186      hourly?: { precipitation_probability?: number[] }
187    }
188    if (!om.current) return
189    const w: Weather = {
190      tempC: om.current.temperature_2m,
191      code: om.current.weather_code,
192      isDay: om.current.is_day === 1,
193      humidity: Math.round(om.current.relative_humidity_2m),
194      rainChance: Math.max(0, ...(om.hourly?.precipitation_probability ?? [0])),
195      city: geo.city ?? '',
196      at: Date.now(),
197    }
198    await $.store.set('weather', w)
199    await update($, weather, () => w)
200  } catch {
201    return
202  }
203}
204
205async function tick($: EngineInterface) {
206  await update($, frame, f => (f + 1) % 2)
207  const t = await read($, toast)
208  if (t && Date.now() - t.at > TOAST_MS) await update($, toast, () => null)
209}
210
211export function projectSegs(name: string, w: Weather | null, f: number, workedMs: number | undefined): Seg[] {
212  const dot: Seg = { text: '  ·  ', color: C.faint }
213  const out: Seg[] = [{ text: name.toUpperCase(), color: C.name, bold: true }, dot]
214  if (w) {
215    const kind = weatherKind(w)
216    out.push(
217      { text: WEATHER_GLYPH[kind][f % 2] ?? '', color: WEATHER_COLOR[kind], bold: true },
218      { text: ` ${tempLabel(w.tempC)} ${WEATHER_TH[kind]}`, color: C.fg, bold: true },
219      { text: ` ${shortNote(w, kind)}`, color: C.dim },
220    )
221  } else {
222    out.push({ text: 'กำลังโหลดอากาศ…', color: C.dim })
223  }
224  out.push(dot, { text: 'ทำงานมาแล้ว ', color: C.fg }, { text: workedMs === undefined ? '—' : workedLabel(workedMs), color: C.fg, bold: true })
225  return out
226}
227
228export const register: Register = on => {
229  on('session.start', async ($, e, next) => {
230    const result = await next(e)
231    cwd = await $.session.cwd()
232    const started = await $.session.usage()
233    await update($, startedAt, () => (typeof started.startedAt === 'number' ? started.startedAt : Date.now()))
234    await loadWeather($)
235    $.clock.every(WEATHER_MS, () => loadWeather($))
236    $.clock.every(2_000, () => tick($))
237    await $.command.register({ name: 'fuel-debug', description: 'fuel-bar: show the raw values it is drawing from' })
238    const settings = (await $.settings.read()) as { effortLevel?: string }
239    const usage = await $.session.usage()
240    await refresh($, {
241      effort: settings.effortLevel,
242      tokens: usage.context.tokens,
243      window: usage.context.window,
244    })
245    return result
246  })
247
248  on('turn.step', async function* ($, e, next) {
249    if (!e.agentId && e.effort !== undefined) {
250      const effort = String(e.effort)
251      const s = await read($, snapshot)
252      if (s && s.effort !== effort) await update($, snapshot, p => (p ? { ...p, effort } : p))
253    }
254    return yield* next(e)
255  })
256
257  on('session.measure', async ($, e, next) => {
258    const result = await next(e)
259    const usage = await $.session.usage({ breakdown: 'summary' })
260    const five = e.rateLimits.find(r => r.kind === 'five_hour')
261    const seven = e.rateLimits.find(r => r.kind === 'seven_day')
262    await refresh($, {
263      tokens: e.context.tokens,
264      window: e.context.window,
265      threshold: usage.context.breakdown?.autoCompactThreshold,
266      fiveHour: five ? { percent: five.percentUsed, resetsAt: five.resetsAt } : undefined,
267      sevenDay: seven ? { percent: seven.percentUsed, resetsAt: seven.resetsAt } : undefined,
268    })
269    return result
270  })
271
272  on('ui.toast', async ($, e) => {
273    await update($, toast, () => ({ text: e.text, at: Date.now() }))
274    return { value: undefined }
275  })
276
277  on('classic.UserPromptSubmit', async ($, e, next) => {
278    await trackMode($, e.permission_mode)
279    return next(e)
280  })
281  on('classic.Stop', async ($, e, next) => {
282    await trackMode($, e.permission_mode)
283    return next(e)
284  })
285
286  on('ui.render', { component: 'PromptHint' }, async ($, e, next) => {
287    const s = await read($, snapshot)
288    if (!s) return next(e)
289    lastHint = e.props.hint
290    const fromHint = modeFromHint(e.props.hint)
291    const mode = fromHint ?? (s.permissionMode && s.permissionMode !== 'default' ? s.permissionMode : undefined)
292    const stripped = stripModePill(e.props.hint)
293    const hint = (await read($, thaiOn)) ? thaiHint(stripped) : stripped
294    const columns = e.viewport?.columns ?? 120
295    const enginePill = mode ? 20 : 0
296    const room = columns - 2 - enginePill
297    const lines = buildLines(s, undefined, hint, room, Date.now())
298    const [w, t, f, start] = await Promise.all([read($, weather), read($, toast), read($, frame), read($, startedAt)])
299    const proj = projectSegs(baseName(cwd), w, f, start ? Date.now() - start : undefined)
300    const projWidth = proj.reduce((n, x) => n + cellWidth(x.text), 0) + 1
301    const toastRoom = room - projWidth - 4
302    const showToast = t && Date.now() - t.at <= TOAST_MS && toastRoom > 8
303    const { Box, Text } = $.ui.resolve(e)
304    const row = (segs: Seg[], key: string) =>
305      segs.map((seg, j) => (
306        <Text key={`${key}-${j}`} color={seg.color} backgroundColor={seg.bg} bold={seg.bold}>
307          {seg.text}
308        </Text>
309      ))
310    return (
311      <Box flexDirection="column">
312        {lines.map((line, i) => (
313          <Box key={`l${i}`} flexDirection="row">
314            <Text> </Text>
315            {row(line, `s${i}`)}
316          </Box>
317        ))}
318        <Box key="proj" flexDirection="row" justifyContent="space-between" width={room}>
319          <Box flexDirection="row">
320            <Text> </Text>
321            {row(proj, 'p')}
322          </Box>
323          {showToast ? (
324            <Text color={C.fg}>
325              <Text color={C.yellow}>▍ </Text>
326              {fitCells(t.text, toastRoom)}
327            </Text>
328          ) : null}
329        </Box>
330      </Box>
331    )
332  })
333
334  on('command.run', { command: 'fuel-debug' }, async $ => {
335    const s = await read($, snapshot)
336    return { text: `hint: ${JSON.stringify(lastHint)}\nsnapshot: ${JSON.stringify(s)}` }
337  })
338}
339

1export type Weather = { tempC: number; code: number; isDay: boolean; humidity: number; rainChance: number; city: string; at: number }
2export type WeatherKind = 'sun' | 'hot' | 'cloud' | 'rain' | 'storm' | 'fog' | 'night'
3
4export const baseName = (p: string) => p.replace(/\\/g, '/').replace(/\/$/, '').split('/').pop() ?? p
5
6export function weatherKind(w: Weather): WeatherKind {
7  const c = w.code
8  if (c >= 95) return 'storm'
9  if ((c >= 51 && c <= 67) || (c >= 80 && c <= 82)) return 'rain'
10  if (c === 45 || c === 48) return 'fog'
11  if (c === 3 || c === 2) return w.isDay ? 'cloud' : 'night'
12  if (!w.isDay) return 'night'
13  return w.tempC >= 36 ? 'hot' : 'sun'
14}
15
16export const WEATHER_TH: Record<WeatherKind, string> = {
17  sun: 'แดดดี',
18  hot: 'ร้อนจัด',
19  cloud: 'เมฆมาก',
20  rain: 'ฝนตก',
21  storm: 'พายุฝนฟ้าคะนอง',
22  fog: 'หมอก',
23  night: 'กลางคืน',
24}
25
26export const WEATHER_COLOR: Record<WeatherKind, string> = {
27  sun: '#a06c00',
28  hot: '#b8322b',
29  cloud: '#6b675e',
30  rain: '#2f6aa8',
31  storm: '#7d4fb0',
32  fog: '#8a8780',
33  night: '#2a8a86',
34}
35
36export const WEATHER_GLYPH: Record<WeatherKind, [string, string]> = {
37  sun: ['☀', '✹'],
38  hot: ['☀', '♨'],
39  cloud: ['☁', '☁'],
40  rain: ['☂', '⁘'],
41  storm: ['↯', '☁'],
42  fog: ['≡', '≈'],
43  night: ['☾', '✦'],
44}
45
46export function shortNote(w: Weather, kind: WeatherKind): string {
47  if (kind === 'storm') return 'ระวังฟ้าผ่า'
48  if (kind === 'hot') return 'ดื่มน้ำ'
49  return `ฝน ${w.rainChance}%`
50}
51
52export function tempLabel(c: number): string {
53  return `${c.toFixed(1)}°`
54}
55
56export function workedLabel(ms: number): string {
57  const m = Math.max(0, Math.floor(ms / 60_000))
58  return `${Math.floor(m / 60)}:${String(m % 60).padStart(2, '0')} hr`
59}
60
61const THAI_ZERO = /[ัิ-ฺ็-๎]/u
62
63export function cellWidth(s: string): number {
64  let n = 0
65  for (const ch of s) if (!THAI_ZERO.test(ch)) n++
66  return n
67}
68
69export function fitCells(s: string, max: number): string {
70  if (cellWidth(s) <= max) return s
71  let out = ''
72  for (const ch of s) {
73    if (cellWidth(out + ch) > max - 1) break
74    out += ch
75  }
76  return `${out}…`
77}
78

1export type FuelWeather = { tempC: number; code: number; isDay: boolean; humidity: number; rainChance: number; city: string; at: number }
2export type FuelToast = { text: string; at: number }
3
4export type FuelQuota = { percent: number; resetsAt?: string }
5
6export type FuelSnapshot = {
7  turn: number
8  model: string
9  effort?: string
10  tokens?: number
11  window: number
12  threshold?: number
13  fiveHour?: FuelQuota
14  sevenDay?: FuelQuota
15  permissionMode?: string
16}
17
18declare module 'claude-code' {
19  interface PluginState {
20    'fuel-bar': {
21      snapshot: FuelSnapshot | null
22      weather: FuelWeather | null
23      toast: FuelToast | null
24      frame: number
25      startedAt: number
26    }
27  }
28}
29