progress-meter

1import type { EngineInterface, Register } from 'claude-code'
2
3// #37 Progress meter: the owner's fixed formula (25% agent, 20% knowledge & library, 15% visual, 10% UI,
4// 10% sound/animation/FX, 20% website) read from ~/.claude/apple-meter.json, which the agent updates when a
5// benchmark result lands. A pane with a large total, a segmented bar per domain (measured vs estimated), a
6// scanning shimmer, and the live bench progress; the status line carries the compact version. `/meter` opens it.
7const PANE = 'apple-meter'
8const WIDTH = 40
9
10type Domain = { id: string; name: string; weight: number; value: number; basis: 'measured' | 'estimated' }
11type Meter = { updatedAt: string; note?: string; domains: Domain[]; live?: { label: string; done: number; total: number; credits: number; budget: number } }
12
13let meter: Meter | null = null
14let frame = 0
15let problem = ''
16
17const total = (m: Meter) => m.domains.reduce((n, d) => n + (d.weight * d.value) / 100, 0)
18const bar = (pct: number, width: number, shimmerAt: number) => {
19  const filled = Math.round((Math.max(0, Math.min(100, pct)) / 100) * width)
20  return Array.from({ length: width }, (_, i) => (i < filled ? (i === shimmerAt % Math.max(1, filled) ? '▓' : '█') : '░')).join('')
21}
22const heat = (pct: number) => (pct >= 90 ? '#3ddc97' : pct >= 60 ? '#7ee787' : pct >= 35 ? '#f2cc60' : pct >= 15 ? '#ff9e64' : '#ff6b81')
23
24async function load($: EngineInterface) {
25  const home = await $.env.get('HOME')
26  try {
27    meter = JSON.parse(await $.fs.read(`${home}/.claude/apple-meter.json`)) as Meter
28    problem = ''
29  } catch (err) {
30    problem = `no meter file yet (${String(err).slice(0, 60)})`
31  }
32  if (meter) {
33    const t = total(meter)
34    $.ui.status(`APPLE ${t.toFixed(1)}% ${bar(t, 12, -1)}${meter.live ? ` · bench ${meter.live.done}/${meter.live.total}` : ''}`)
35  }
36  $.ui.invalidate('ui.render')
37}
38
39export const register: Register = on => {
40  on('session.start', async ($, e, next) => {
41    await $.command.register({ name: 'meter', description: "Show Apple's completion out of 100% (the owner's meter)" })
42    const started = await next(e)
43    await load($)
44    $.clock.every(30_000, () => void load($))
45    $.clock.every(250, () => {
46      frame += 1
47      $.ui.invalidate('ui.render')
48    })
49    void $.ui.open({ id: PANE, title: 'APPLE · COMPLETION' })
50    return started
51  })
52
53  on('command.run', { command: 'meter' }, async $ => {
54    await load($)
55    await $.ui.open({ id: PANE, title: 'APPLE · COMPLETION' })
56    return { text: meter ? `Apple is ${total(meter).toFixed(1)}% complete by the fixed meter.` : problem }
57  })
58
59  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
60    const { Box, Text } = $.ui.resolve(e)
61    if (!meter) return <Box><Text dimColor>{problem || 'loading…'}</Text></Box>
62    const t = total(meter)
63    const width = Math.max(16, Math.min(WIDTH, (e.viewport?.columns ?? 60) - 22))
64    const ticks = '▏' + Array.from({ length: 10 }, (_, i) => `${(i + 1) * 10}`.padStart(Math.round(width / 10), '·')).join('')
65    const scan = '·'.repeat(frame % (width + 1)) + '◆' + '·'.repeat(Math.max(0, width - (frame % (width + 1))))
66    return (
67      <Box flexDirection="column">
68        <Box gap={1}>
69          <Text bold color={heat(t)}>{t.toFixed(1)}%</Text>
70          <Text dimColor>of 100 · product completion · fixed formula</Text>
71        </Box>
72        <Text color={heat(t)}>{bar(t, width, frame)}</Text>
73        <Text dimColor>{ticks.slice(0, width + 1)}</Text>
74        <Text color="#4fc3f7" dimColor>{scan.slice(0, width + 1)}</Text>
75        <Text> </Text>
76        {meter.domains.map(d => (
77          <Box key={d.id} flexDirection="column">
78            <Box gap={1}>
79              <Text bold>{d.name}</Text>
80              <Text dimColor>w{d.weight}% · {d.basis === 'measured' ? '● measured' : '○ estimated'}</Text>
81            </Box>
82            <Box gap={1}>
83              <Text color={heat(d.value)}>{bar(d.value, width - 8, frame + d.weight)}</Text>
84              <Text color={heat(d.value)}>{d.value.toFixed(1).padStart(5)}%</Text>
85            </Box>
86          </Box>
87        ))}
88        <Text> </Text>
89        {meter.live && (
90          <Box gap={1}>
91            <Text color="#4fc3f7">▶ {meter.live.label}</Text>
92            <Text dimColor>{meter.live.done}/{meter.live.total} items · {meter.live.credits}/{meter.live.budget} credits</Text>
93          </Box>
94        )}
95        {meter.live && <Text color="#4fc3f7">{bar((100 * meter.live.done) / Math.max(1, meter.live.total), width, frame)}</Text>}
96        {meter.note && <Text dimColor wrap="wrap">{meter.note}</Text>}
97        <Text dimColor>updated {new Date(meter.updatedAt).toLocaleString()}</Text>
98      </Box>
99    )
100  })
101}
102