hello-mod

1/* @jsx h */
2import type { Register } from 'claude-code'
3import { add, bar, barColor, fmt, isLifetime, shortModel, total, usd, zero, type Lifetime, type Tokens } from './cost.ts'
4
5// hello-mod：Claude Code function hooks 的最小可运行演示。
6// 一个 /hello 命令，一条 prompt 上方的面板，面板里有可点的按钮、实时 token/成本计，
7// 和一个跑在独立绘制线程上的动画。全部零 token —— 模型不参与其中任何一步。
8
9let open = false
10let clicks = 0
11let tools = 0
12let turns = 0
13let lastTool = '—'
14let tokens: Tokens = zero()
15let model = ''
16// $.session.usage() 给的是本会话累计花费，取差值才能累加到跨会话总账上
17let lastUsd = 0
18let lifetime: Lifetime = { turns: 0, usd: 0, tokens: 0 }
19
20export const register: Register = on => {
21  on('session.start', async ($, e, next) => {
22    const r = await next(e)
23    // store 读写失败只该损失计数，不该掀翻整个模块：hook 里未捕获的 reject 会卸载模块
24    const read = (key: string) => $.store.get(key).catch(err => { $.ui.log(`hello-mod: 读取 ${key} 失败: ${err}`); return undefined })
25    const savedClicks = await read('clicks')
26    if (typeof savedClicks === 'number') clicks = savedClicks
27    const savedLifetime = await read('lifetime')
28    if (isLifetime(savedLifetime)) lifetime = savedLifetime
29    await $.command.register({
30      name: 'hello',
31      description: 'function hooks 演示面板：token/成本计 + 可点按钮 (hello-mod)',
32      argumentHint: '[off | reset]',
33      immediate: true,
34    }).catch(err => $.ui.log(`hello-mod: /hello 注册失败: ${err}`))
35    return r
36  })
37
38  on('command.run', { command: 'hello' }, async ($, e, next) => {
39    const arg = e.args.trim().toLowerCase()
40    if (arg === 'off') {
41      open = false
42      $.ui.invalidate('ui.render')
43      return { text: '面板已关闭' }
44    }
45    if (arg === 'reset') {
46      clicks = 0
47      lifetime = { turns: 0, usd: 0, tokens: 0 }
48      await $.store.set('clicks', 0).catch(() => {})
49      await $.store.set('lifetime', lifetime).catch(() => {})
50      $.ui.invalidate('ui.render')
51      return { text: '点击数和跨会话总账已清零' }
52    }
53    open = true
54    $.ui.invalidate('ui.render')
55    return { text: '面板已打开 · 这条回复由插件直接生成，没有经过模型 · /hello off 关闭' }
56  })
57
58  on('tool.call', async ($, e, next) => {
59    const r = await next(e)
60    tools++
61    lastTool = e.tool
62    if (open) $.ui.invalidate('ui.render')
63    return r
64  })
65
66  // 一轮结束时结算：e.usage 是这一轮所有响应的 token 计数之和
67  on('turn.complete', async ($, e, next) => {
68    const r = await next(e)
69    turns++
70    if (e.usage) {
71      tokens = add(tokens, e.usage)
72      model = e.usage.model
73    }
74    const session = await $.session.usage().catch(err => { $.ui.log(`hello-mod: 读取用量失败: ${err}`); return undefined })
75    const spent = session?.cost?.usd ?? 0
76    const delta = Math.max(0, spent - lastUsd)
77    lastUsd = spent
78    lifetime = {
79      turns: lifetime.turns + 1,
80      usd: lifetime.usd + delta,
81      tokens: lifetime.tokens + (e.usage ? total(add(zero(), e.usage)) : 0),
82    }
83    await $.store.set('lifetime', lifetime).catch(err => $.ui.log(`hello-mod: 写入总账失败: ${err}`))
84    if (open) $.ui.invalidate('ui.render')
85    return r
86  })
87
88  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
89    // 只在终端画：桌面端和移动端有自己的一条带子
90    if (!open || e.surface !== 'terminal') return next(e)
91    const { Box, Button, Client, Text } = await $.ui.resolve(e)
92    const session = await $.session.usage().catch(() => undefined)
93    const ctx = session?.context
94    const percent = ctx?.percent ?? 0
95    const spent = session?.cost?.usd ?? lastUsd
96
97    const bump = (n: number) => {
98      clicks += n
99      $.ui.invalidate('ui.render')
100      void $.store.set('clicks', clicks).catch(err => $.ui.log(`hello-mod: 写入失败: ${err}`))
101    }
102    const close = () => {
103      open = false
104      $.ui.invalidate('ui.render')
105    }
106
107    return (
108      <Box flexDirection="column">
109        <Text bold color="cyan">hello-mod · function hooks 演示</Text>
110
111        <Box flexDirection="row" columnGap={1}>
112          <Text>上下文</Text>
113          <Text color={barColor(percent)}>{bar(percent)}</Text>
114          <Text>{`${percent}%`}</Text>
115          <Text dimColor>{`${fmt(ctx?.tokens ?? 0)} / ${fmt(ctx?.window ?? 0)}`}</Text>
116          <Text color="yellow" bold>{`本会话 ${usd(spent)}`}</Text>
117          {model ? <Text dimColor>{shortModel(model)}</Text> : null}
118        </Box>
119
120        <Text dimColor>
121          {`本会话 ${turns} 轮 · in ${fmt(tokens.input)} · out ${fmt(tokens.output)} · 缓存读 ${fmt(tokens.cacheRead)} 写 ${fmt(tokens.cacheWrite)} · 工具 ${tools} 次（最近 ${lastTool}）`}
122        </Text>
123        <Text dimColor>
124          {`跨会话累计 ${lifetime.turns} 轮 · ${usd(lifetime.usd)} · ${fmt(lifetime.tokens)} tokens（存在 $.store）`}
125        </Text>
126
127        <Box flexDirection="row" columnGap={1}>
128          <Button key="hm:inc" label=" +1 " onPress={() => bump(1)} />
129          <Button key="hm:dec" label=" -1 " onPress={() => bump(-1)} />
130          <Button key="hm:close" label=" 关闭 " onPress={close} />
131          <Text dimColor>{`点击 ${clicks} 次 · 按钮不经过模型`}</Text>
132        </Box>
133
134        <Client key="hm:clock" module="./clock.tsx" width={e.viewport?.columns ?? 60} height={1} props={{ percent }} />
135        {await next(e)}
136      </Box>
137    )
138  })
139}
140

1// 纯函数：token 累加与格式化。与 Claude Code API 无关，可以单独测试。
2
3export type Tokens = { input: number; output: number; cacheRead: number; cacheWrite: number }
4export type Lifetime = { turns: number; usd: number; tokens: number }
5
6export const zero = (): Tokens => ({ input: 0, output: 0, cacheRead: 0, cacheWrite: 0 })
7
8export const add = (t: Tokens, u: { input_tokens: number; output_tokens: number; cache_read_input_tokens: number; cache_creation_input_tokens: number }): Tokens => ({
9  input: t.input + u.input_tokens,
10  output: t.output + u.output_tokens,
11  cacheRead: t.cacheRead + u.cache_read_input_tokens,
12  cacheWrite: t.cacheWrite + u.cache_creation_input_tokens,
13})
14
15export const total = (t: Tokens): number => t.input + t.output + t.cacheRead + t.cacheWrite
16
17// 1234 -> 1.2k, 1234567 -> 1.2M
18export function fmt(n: number): string {
19  if (n < 1000) return String(Math.round(n))
20  if (n < 1_000_000) return `${(n / 1000).toFixed(1)}k`
21  return `${(n / 1_000_000).toFixed(2)}M`
22}
23
24// 很小的金额多给几位小数，否则一直显示 $0.00
25export function usd(n: number): string {
26  if (n === 0) return '$0'
27  if (n < 0.01) return `$${n.toFixed(4)}`
28  if (n < 1) return `$${n.toFixed(3)}`
29  return `$${n.toFixed(2)}`
30}
31
32export function bar(percent: number, width = 10): string {
33  const filled = Math.max(0, Math.min(width, Math.round((percent / 100) * width)))
34  return '█'.repeat(filled) + '░'.repeat(width - filled)
35}
36
37export const barColor = (percent: number): string => (percent >= 80 ? 'red' : percent >= 60 ? 'yellow' : 'green')
38
39// 模型 id 通常形如 claude-opus-5-20260101，展示时去掉日期后缀
40export const shortModel = (id: string): string => id.replace(/-\d{8}$/, '')
41
42export const isLifetime = (v: unknown): v is Lifetime =>
43  typeof v === 'object' && v !== null && typeof (v as Lifetime).turns === 'number' && typeof (v as Lifetime).usd === 'number'
44

1/* @jsx h */
2import type { ClientSurface } from 'claude-code'
3
4// surface module：跑在独立绘制线程上，有自己的帧时钟、键盘和鼠标。
5// 注意：这个文件里绝不能出现名为 h 的局部变量 —— 每个 JSX 标签都编译成 h() 调用。
6const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
7type State = { tick: number }
8
9export default function Clock(props: { percent?: number } | undefined, surface: ClientSurface<State>) {
10  const { Box, Text } = surface.elements
11  if (surface.state === undefined) {
12    surface.setState({ tick: 0 })
13    surface.every(100, () => {
14      const s = surface.state
15      if (s) surface.setState({ tick: s.tick + 1 })
16    })
17  }
18  const tick = surface.state?.tick ?? 0
19  return (
20    <Box flexDirection="row" columnGap={1}>
21      <Text color="green">{FRAMES[tick % FRAMES.length]}</Text>
22      <Text dimColor>{`独立绘制线程 · 第 ${tick} 帧 · 10fps · 零 token · 主线程忙时照转`}</Text>
23    </Box>
24  )
25}
26