token-meter

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { TokenMeterTurn, TokenMeterUsage } from '../types'
5import { barsSvg, hitRate, short, sum, summarySvg } from './svg'
6import { followTheme, readTheme } from './style'
7
8const PANE = 'token-meter'
9const TITLE = 'トークン'
10const KEEP = 50
11
12const ZERO: TokenMeterUsage = { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 }
13
14const turnsA = atom({ plugin: 'token-meter', key: 'turns' } as const, [] as TokenMeterTurn[])
15const totalA = atom({ plugin: 'token-meter', key: 'total' } as const, ZERO)
16const subA = atom({ plugin: 'token-meter', key: 'sub' } as const, { ...ZERO, runs: 0 })
17const countA = atom({ plugin: 'token-meter', key: 'count' } as const, 0)
18const heaviestA = atom({ plugin: 'token-meter', key: 'heaviest' } as const, null as TokenMeterTurn | null)
19
20type $ = EngineInterface
21
22// /tokens を自分で取れたか (取れなければ組み込みの /tokens には触らない)
23let ownsTokens = false
24
25const add = (a: TokenMeterUsage, b: TokenMeterUsage): TokenMeterUsage => ({
26  input: a.input + b.input,
27  output: a.output + b.output,
28  cacheRead: a.cacheRead + b.cacheRead,
29  cacheWrite: a.cacheWrite + b.cacheWrite,
30})
31
32const reset = async ($: $) => {
33  await update($, turnsA, () => [])
34  await update($, totalA, () => ZERO)
35  await update($, subA, () => ({ ...ZERO, runs: 0 }))
36  await update($, countA, () => 0)
37  await update($, heaviestA, () => null)
38}
39
40const open = async ($: $) => {
41  await $.ui.open({ id: PANE, title: TITLE })
42  return { text: 'トークンのペインを開きました。' }
43}
44
45export const register: Register = on => {
46  followTheme(on)
47  on('session.start', async ($, e, next) => {
48    await readTheme($)
49    // /tokens が組み込みにあると拒まれる。その時は /token-meter にし、/tokens は組み込みに任せる
50    const got = await $.command.register({ name: 'tokens', description: 'ターンごとのトークン数とキャッシュの当たり率をペインに表示' }).catch(() => undefined)
51    ownsTokens = got?.command === 'tokens'
52    if (!ownsTokens) {
53      await $.command.register({ name: 'token-meter', description: 'ターンごとのトークン数とキャッシュの当たり率をペインに表示' }).catch(() => {})
54    }
55    return next(e)
56  })
57
58  on('command.run', { command: 'tokens' }, ($, e, next) => (ownsTokens ? open($) : next(e))).catch(($, e, next) => next(e))
59  // /tokens を持てた時は /token-meter を登録していないので、その名前の持ち主に回す
60  on('command.run', { command: 'token-meter' }, ($, e, next) => (ownsTokens ? next(e) : open($))).catch(($, e, next) => next(e))
61
62  // /clear で数え直す
63  on('session.end', async ($, e, next) => {
64    if (e.reason === 'clear') await reset($)
65    return next(e)
66  })
67
68  // 中断や API エラーのターンには usage が無い。サブエージェント (agentId 付き) は棒に混ぜず合計だけ別に持つ
69  on('turn.complete', async ($, e, next) => {
70    const u = e.usage
71    if (u) {
72      const t: TokenMeterUsage = {
73        input: u.input_tokens,
74        output: u.output_tokens,
75        cacheRead: u.cache_read_input_tokens,
76        cacheWrite: u.cache_creation_input_tokens,
77      }
78      if (e.agentId !== undefined) {
79        await update($, subA, s => ({ ...add(s, t), runs: s.runs + 1 }))
80      } else {
81        let n = 0
82        await update($, countA, c => (n = c + 1))
83        const turn = { ...t, n }
84        await update($, turnsA, list => [...list, turn].slice(-KEEP))
85        await update($, totalA, s => add(s, t))
86        await update($, heaviestA, h => (h === null || sum(turn) > sum(h) ? turn : h))
87      }
88    }
89    return next(e)
90  })
91
92  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
93    const t = $.ui.resolve(e)
94    const { Box, Text, Button } = t
95    const turns = await read($, turnsA)
96    const total = await read($, totalA)
97    const sub = await read($, subA)
98    const heaviest = await read($, heaviestA)
99    const rate = hitRate(total)
100    const rateText = rate === null ? '─' : `${Math.round(rate * 100)}%`
101    const resetButton = <Button key="reset" dimColor label="リセット" onPress={() => reset($)} />
102
103    // terminal の部品表にも Svg の名前はあるので、画面の種類でも分ける
104    if (e.surface === 'terminal' || !('Svg' in t)) {
105      const last = turns[turns.length - 1]
106      return (
107        <Box flexDirection="column">
108          <Text key="io">{`入力 ${short(total.input)}  出力 ${short(total.output)}`}</Text>
109          <Text key="cache">{`キャッシュ 読み ${short(total.cacheRead)}  書き ${short(total.cacheWrite)}`}</Text>
110          <Text key="rate" color={rate === null ? undefined : rate >= 0.7 ? 'green' : rate >= 0.4 ? 'yellow' : 'red'}>
111            {`当たり率 ${rateText}`}
112          </Text>
113          <Text key="last" dimColor>
114            {last ? `最新 #${last.n} ${short(sum(last))}` : 'まだターンがありません'}
115          </Text>
116          {heaviest && <Text key="heaviest" dimColor>{`一番重かったターン #${heaviest.n} ${short(sum(heaviest))}`}</Text>}
117          {sub.runs > 0 && <Text key="sub" dimColor>{`サブエージェント ${sub.runs}回 計 ${short(sum(sub))}`}</Text>}
118          {resetButton}
119        </Box>
120      )
121    }
122
123    const { Svg } = t
124    return (
125      <Box flexDirection="column" gap={1}>
126        <Svg
127          key="summary"
128          source={summarySvg(total, sub)}
129          alt={`合計 入力 ${short(total.input)} 出力 ${short(total.output)} キャッシュ読み ${short(total.cacheRead)} キャッシュ書き ${short(total.cacheWrite)} 当たり率 ${rateText}`}
130        />
131        <Svg key="bars" source={barsSvg(turns, heaviest)} alt={`ターンごとの積み上げ棒 直近${Math.min(20, turns.length)}ターン`} />
132        {resetButton}
133      </Box>
134    )
135  })
136}
137

1// SVG を文字列で組む関数。描画面は <img> なので動きは SMIL だけ
2// 描き直すのはターンが終わる時(とリセット)だけなので、数字と最新の棒は開くたびに 1 回だけ動く
3import type { TokenMeterTurn, TokenMeterUsage } from '../types'
4import { C, HEADER_H, W, countUp, esc, frame, header } from './style'
5
6/** 4 種の名前と色。積み上げは下からこの順。色はテーマに付いていくよう読むたびに C から引く */
7export const SERIES: { key: keyof TokenMeterUsage; label: string; readonly color: string }[] = [
8  { key: 'cacheRead', label: 'キャッシュ読み', get color() { return C.green } },
9  { key: 'cacheWrite', label: 'キャッシュ書き', get color() { return C.purple } },
10  { key: 'input', label: '入力', get color() { return C.blue } },
11  { key: 'output', label: '出力', get color() { return C.orange } },
12]
13
14/** 1234 → 1.2k、3456789 → 3.5M。1000 未満はそのまま */
15export const short = (n: number) => {
16  const one = (v: number, unit: string) => `${v < 100 ? v.toFixed(1).replace(/\.0$/, '') : Math.round(v)}${unit}`
17  if (n < 1000) return String(Math.round(n))
18  if (n < 999_950) return one(n / 1000, 'k')
19  return one(n / 1_000_000, 'M')
20}
21
22export const sum = (u: TokenMeterUsage) => u.input + u.output + u.cacheRead + u.cacheWrite
23
24/** キャッシュの当たり率 (0〜1)。入力が 1 つも無ければ null */
25export const hitRate = (u: TokenMeterUsage) => {
26  const all = u.input + u.cacheRead + u.cacheWrite
27  return all > 0 ? u.cacheRead / all : null
28}
29
30export const rateColor = (r: number) => (r >= 0.7 ? C.green : r >= 0.4 ? C.yellow : C.red)
31
32const text = (x: number, y: number, s: string, size: number, fill: string, extra = '') =>
33  `<text x="${x}" y="${y}" font-size="${size}" fill="${fill}" ${extra}>${esc(s)}</text>`
34
35/** 見出しの下から中身を始める y */
36const TOP = HEADER_H + 12
37
38// ---- 合計とリング ----
39
40export const summarySvg = (total: TokenMeterUsage, sub: TokenMeterUsage & { runs: number }) => {
41  const cells: [string, number, string][] = [
42    ['入力', total.input, C.blue],
43    ['出力', total.output, C.orange],
44    ['キャッシュ読み', total.cacheRead, C.green],
45    ['キャッシュ書き', total.cacheWrite, C.purple],
46  ]
47  const nums = cells
48    .map(([label, n, color], i) => {
49      const x = 16 + (i % 2) * 110
50      const y = TOP + 12 + Math.floor(i / 2) * 64
51      return text(x, y, label, 12, C.dim) + countUp(n, `x="${x}" y="${y + 30}" font-size="26" fill="${color}" font-weight="bold"`, short, i * 0.06)
52    })
53    .join('')
54
55  // リング: 上から時計回りに当たり率の分だけ塗る。描くたびに 0 から伸ばす
56  const cx = 300
57  const cy = 110
58  const r = 46
59  const len = 2 * Math.PI * r
60  const rate = hitRate(total)
61  const ring =
62    `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${C.line}" stroke-width="12"/>` +
63    (rate === null
64      ? text(cx, cy + 8, '─', 22, C.dim, 'text-anchor="middle"')
65      : `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${rateColor(rate)}" stroke-width="12" stroke-linecap="round" ` +
66        `stroke-dasharray="${len.toFixed(1)}" stroke-dashoffset="${(len * (1 - rate)).toFixed(1)}" transform="rotate(-90 ${cx} ${cy})">` +
67        `<animate attributeName="stroke-dashoffset" from="${len.toFixed(1)}" to="${(len * (1 - rate)).toFixed(1)}" dur="0.9s" fill="freeze"/></circle>` +
68        text(cx, cy + 8, `${Math.round(rate * 100)}%`, 22, rateColor(rate), 'text-anchor="middle" font-weight="bold"')) +
69    text(cx, cy + r + 26, 'キャッシュ当たり', 12, C.dim, 'text-anchor="middle"')
70
71  const subLine =
72    sub.runs > 0
73      ? text(16, 208, `サブエージェント ${sub.runs}回  計 ${short(sum(sub))}`, 12, C.dim)
74      : text(16, 208, 'サブエージェントの分は別に数えます', 12, C.dim)
75
76  return frame(224, header('トークン', 'セッション合計', C.green) + nums + ring + `<line x1="16" y1="188" x2="${W - 16}" y2="188" stroke="${C.line}"/>` + subLine)
77}
78
79// ---- ターンごとの積み上げ棒 ----
80
81export const barsSvg = (turns: TokenMeterTurn[], heaviest: TokenMeterTurn | null) => {
82  const shown = turns.slice(-20)
83  const H = 274
84  if (shown.length === 0) {
85    return frame(H, header('ターンごと') + text(W / 2, 152, 'まだターンがありません', 13, C.dim, 'text-anchor="middle"'))
86  }
87
88  // 凡例
89  let lx = 16
90  const legend = SERIES.map(s => {
91    const part = `<rect x="${lx}" y="${TOP}" width="12" height="12" rx="2" fill="${s.color}"/>` + text(lx + 16, TOP + 11, s.label, 12, C.text)
92    lx += 16 + s.label.length * 12 + 10
93    return part
94  }).join('')
95
96  const top = TOP + 40
97  const base = 218
98  const plotH = base - top
99  const left = 16
100  const slot = (W - 32) / 20
101  const bw = Math.max(4, slot - 5)
102  const max = Math.max(1, ...shown.map(sum))
103
104  const grid =
105    `<line x1="${left}" y1="${top}" x2="${W - 16}" y2="${top}" stroke="${C.line}" stroke-dasharray="3 4"/>` +
106    `<line x1="${left}" y1="${base}" x2="${W - 16}" y2="${base}" stroke="${C.line}"/>` +
107    text(left, top - 6, short(max), 12, C.dim)
108
109  const bars = shown
110    .map((t, i) => {
111      const isLast = i === shown.length - 1
112      const x = left + i * slot + (slot - bw) / 2
113      let y = base
114      const segs = SERIES.map(s => {
115        const h = (t[s.key] / max) * plotH
116        if (h <= 0) return ''
117        y -= h
118        // 最新の棒だけ基線から伸ばす (y と height を一緒に動かして積み上げを崩さない)
119        const grow = isLast
120          ? `<animate attributeName="y" from="${base}" to="${y.toFixed(1)}" dur="0.7s" fill="freeze"/>` +
121            `<animate attributeName="height" from="0" to="${h.toFixed(1)}" dur="0.7s" fill="freeze"/>`
122          : ''
123        return `<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${bw.toFixed(1)}" height="${h.toFixed(1)}" fill="${s.color}">${grow}</rect>`
124      }).join('')
125      return `<g opacity="${isLast ? 1 : 0.5}">${segs}</g>`
126    })
127    .join('')
128
129  const last = shown[shown.length - 1]!
130  const lastX = left + (shown.length - 1) * slot + slot / 2
131  const lastTop = base - (sum(last) / max) * plotH
132  const marker =
133    `<path d="M${(lastX - 5).toFixed(1)} ${(lastTop - 10).toFixed(1)} l5 6 l5 -6 z" fill="${C.text}">` +
134    `<animate attributeName="opacity" values="0;0;1" dur="0.9s" fill="freeze"/></path>`
135
136  const first = shown[0]!
137  const axis =
138    text(left, base + 18, `#${first.n}`, 12, C.dim) + text(W - 16, base + 18, `#${last.n} 最新 ${short(sum(last))}`, 12, C.text, 'text-anchor="end"')
139
140  const heavy = heaviest
141    ? text(16, 260, '一番重かったターン', 12, C.dim) +
142      text(W - 16, 260, `#${heaviest.n}  ${short(sum(heaviest))}`, 13, C.yellow, 'text-anchor="end" font-weight="bold"')
143    : ''
144
145  return frame(
146    H,
147    header('ターンごと', `直近 ${shown.length} ターン`) +
148      legend +
149      grid +
150      bars +
151      marker +
152      axis +
153      `<line x1="16" y1="240" x2="${W - 16}" y2="240" stroke="${C.line}"/>` +
154      heavy,
155  )
156}
157

1// 全 mod で共通の見た目(色・見出し・動き)と小物。
2// 正本は shared/style.ts。各 mod の hooks/style.ts はその写しなので、直すのは正本だけにして
3// `node tools/copy_shared.mts` で写す(`--check` で写しのずれを見つける)。
4import type { EngineInterface, On } from 'claude-code'
5
6export type Palette = {
7  bg: string
8  face: string
9  line: string
10  text: string
11  dim: string
12  weak: string
13  blue: string
14  green: string
15  yellow: string
16  red: string
17  purple: string
18  orange: string
19}
20
21/** GitHub Dark 系(docs/mod-guide.md の 7 節) */
22export const DARK: Palette = {
23  bg: '#0d1117',
24  face: '#161b22',
25  line: '#30363d',
26  text: '#c9d1d9',
27  dim: '#8b949e',
28  weak: '#8b949e',
29  blue: '#58a6ff',
30  green: '#3fb950',
31  yellow: '#d29922',
32  red: '#f85149',
33  purple: '#bc8cff',
34  orange: '#f78166',
35}
36
37/** GitHub Light 系 */
38export const LIGHT: Palette = {
39  bg: '#ffffff',
40  face: '#f6f8fa',
41  line: '#d0d7de',
42  text: '#1f2328',
43  dim: '#656d76',
44  weak: '#656d76',
45  blue: '#0969da',
46  green: '#1a7f37',
47  yellow: '#9a6700',
48  red: '#cf222e',
49  purple: '#8250df',
50  orange: '#bc4c00',
51}
52
53// ponytail: 今の色はモジュールの変数 1 個(この mod の中だけ)。SVG を作る関数は C.bg などを呼ぶたびに読むので、
54// 引数を増やさずにテーマが変わる。描く途中で切り替わることは無い(JS は 1 本で走る)
55/** 今の色。setTheme で中身が入れ替わる(同じ物を指し続けるので、import した C のままでよい) */
56export const C: Palette = { ...DARK }
57let isLightNow = false
58
59export const isLight = () => isLightNow
60
61/** /config の theme の値が明るい系か('light'・'light-daltonized'・'light-ansi' など) */
62export const isLightTheme = (value: unknown) => typeof value === 'string' && value.startsWith('light')
63
64export function setTheme(light: boolean) {
65  isLightNow = light
66  Object.assign(C, light ? LIGHT : DARK)
67}
68
69/**
70 * 今の /config の theme を読んで色を合わせる。mod 自身の session.start の中で呼ぶ
71 * (同じイベントに matcher 無しのフックを 2 つ置くと読み込みを拒まれるので、ここでは on しない)。
72 * VS Code の配色は mod から読めないので、Claude Code の theme が light 系の時だけ明るくなる
73 */
74export async function readTheme($: EngineInterface) {
75  const rows = await $.config.list().catch(() => [])
76  setTheme(isLightTheme(rows.find(r => r.key === 'theme')?.value))
77}
78
79/** /config で theme が変わったら色を替えて描き直す。register の中で 1 回呼ぶ */
80export function followTheme(on: On) {
81  on('config.set', { key: 'theme' }, async ($, e, next) => {
82    const r = await next(e)
83    if (r.deny === undefined) {
84      setTheme(isLightTheme(r.value))
85      $.ui.invalidate('ui.render')
86    }
87    return r
88  })
89}
90
91// ---- 小物 ----
92
93/** 外から来る文字列の制御文字を落とす。エンジンは制御文字を含む Text の子や alt を拒み、ペインが閉じる */
94export const clean = (s: string) => s.replace(/[\t\n\r]+/g, ' ').replace(/[\x00-\x1f\x7f-\x9f]/g, '').trim()
95
96/** SVG の文字に入れる前のエスケープ(制御文字も落とす) */
97export const esc = (s: string) =>
98  clean(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
99
100// ---- 時間帯と季節 (日本時間 JST = UTC+9 固定。動いている環境のタイムゾーンには頼らない) ----
101
102export type DayPart = '朝' | '昼' | '夕' | '夜'
103export type Season = '春' | '夏' | '秋' | '冬'
104
105const jstDate = (now: number) => new Date(now + 9 * 3_600_000)
106
107/** 時間帯。朝 5-10 時 / 昼 10-16 時 / 夕 16-19 時 / 夜 19-5 時 */
108export const dayPart = (now: number): DayPart => {
109  const h = jstDate(now).getUTCHours()
110  return h >= 5 && h < 10 ? '朝' : h >= 10 && h < 16 ? '昼' : h >= 16 && h < 19 ? '夕' : '夜'
111}
112
113/** 季節。春 3-5 月 / 夏 6-8 月 / 秋 9-11 月 / 冬 12-2 月 */
114export const season = (now: number): Season => {
115  const m = jstDate(now).getUTCMonth() + 1
116  return m >= 3 && m <= 5 ? '春' : m >= 6 && m <= 8 ? '夏' : m >= 9 && m <= 11 ? '秋' : '冬'
117}
118
119/** n 文字を超えたら … で切る */
120export const short = (s: string, n: number) => (s.length > n ? `${s.slice(0, Math.max(0, n - 1))}…` : s)
121
122// ---- 記録を守る(docs/mod-guide.md の 9 節) ----
123
124/** JST の YYYY-MM-DD */
125export const jstDay = (now: number) => jstDate(now).toISOString().slice(0, 10)
126
127export type Backup = { day: string; value: unknown }
128
129// ponytail: $.fs に消す手が無いので、曜日ごとの 7 つの枠を上書きして 7 日分だけ残す。もっと残すなら枠を日付にして process で消す
130const backupPath = (dir: string, plugin: string, key: string, wd: number) => `${dir.replace(/[\\/]+$/, '')}/${plugin}/${key}-${wd}.json`
131
132/**
133 * $.store の key の値を、その日はじめて呼ばれた時だけ dir に控える(曜日ごとの枠で 7 日分)。
134 * dir が空なら何もしない(公開の既定は空。入れた人が backupDir を設定する)。書いたら true
135 */
136export async function backupDaily($: EngineInterface, dir: string, key: string, value: unknown, now: number): Promise<boolean> {
137  if (!dir.trim() || value === undefined) return false
138  const day = jstDay(now)
139  const path = backupPath(dir, $.plugin.name, key, jstDate(now).getUTCDay())
140  // 壊れた枠(途中まで・null)は無いのと同じに扱って上書きする
141  const old = await $.fs.read(path).then(t => parseBackup(t)?.day ?? '', () => '')
142  if (old === day) return false
143  await $.fs.write(path, JSON.stringify({ day, value } satisfies Backup))
144  return true
145}
146
147/** 控えの 1 枠を読む。壊れていれば undefined */
148export function parseBackup(text: string): Backup | undefined {
149  try {
150    const b = JSON.parse(text) as Partial<Backup> | null
151    return b && typeof b.day === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(b.day) && b.value !== undefined ? (b as Backup) : undefined
152  } catch {
153    return undefined
154  }
155}
156
157/** 控えの一覧。新しい日から順。読めない枠・壊れた枠は飛ばす */
158export async function listBackups($: EngineInterface, dir: string, key: string): Promise<Backup[]> {
159  if (!dir.trim()) return []
160  const all = await Promise.all(
161    [0, 1, 2, 3, 4, 5, 6].map(wd =>
162      $.fs.read(backupPath(dir, $.plugin.name, key, wd)).then(parseBackup, () => undefined),
163    ),
164  )
165  return all.filter((b): b is Backup => b !== undefined).sort((a, b) => b.day.localeCompare(a.day))
166}
167
168let loadedPrint: string | undefined
169let staleAt = 0
170let isStaleNow = false
171let toldStale = false
172
173const normPath = (p: string) => p.replace(/[\\/]+/g, '/').replace(/\/$/, '').toLowerCase()
174
175/** FNV-1a 32bit。中身が変わったかを見るだけ */
176function fnv(s: string) {
177  let h = 0x811c9dc5
178  for (let i = 0; i < s.length; i++) h = Math.imul(h ^ s.charCodeAt(i), 0x01000193)
179  return (h >>> 0).toString(16)
180}
181
182/**
183 * 今ディスクにある、この mod の指紋。plugin.json と hooks の .ts / .tsx の中身から作る
184 * (版の数字を上げずに中身だけ変えた時も変わる)。plugin.json が読めなければ undefined
185 */
186async function diskPrint($: EngineInterface): Promise<string | undefined> {
187  const root = $.plugin.root
188  let manifest: string | undefined
189  for (const p of [`${root}/.claude-plugin/plugin.json`, `${root}/plugin.json`]) {
190    manifest = await $.fs.read(p).then(t => t, () => undefined)
191    if (manifest !== undefined) break
192  }
193  if (manifest === undefined) return undefined
194  const names = await $.fs.list(`${root}/hooks`).then(
195    es => es.filter(e => e.kind === 'file' && /\.tsx?$/.test(e.name)).map(e => e.name).sort(),
196    () => [] as string[],
197  )
198  const parts = await Promise.all(names.map(n => $.fs.read(`${root}/hooks/${n}`).then(t => `${n}\n${t}`, () => n)))
199  return fnv([manifest, ...parts].join('\0'))
200}
201
202/**
203 * マーケットプレイスから入れた形(<plugins>/cache/<market>/<name>/<版>)なら、installed_plugins.json に
204 * 今入っている場所が自分と違うか。違えば新しい版が入っている。分からなければ false
205 */
206async function replacedInCache($: EngineInterface): Promise<boolean> {
207  const root = normPath($.plugin.root)
208  const at = root.lastIndexOf('/plugins/cache/')
209  if (at < 0) return false
210  const raw = await $.fs.read(`${$.plugin.root.slice(0, at + '/plugins'.length)}/installed_plugins.json`).then(t => t, () => '')
211  try {
212    const plugins = (JSON.parse(raw) as { plugins?: Record<string, { installPath?: unknown }[]> }).plugins ?? {}
213    const mine = Object.entries(plugins)
214      .filter(([k]) => k.startsWith(`${$.plugin.name}@`))
215      .flatMap(([, v]) => (Array.isArray(v) ? v : []))
216      .map(e => (typeof e.installPath === 'string' ? normPath(e.installPath) : ''))
217    return mine.length > 0 && !mine.includes(root)
218  } catch {
219    return false
220  }
221}
222
223/** 読み込んだ時の指紋を覚える。mod の session.start で 1 回呼ぶ */
224export async function rememberVersion($: EngineInterface) {
225  loadedPrint ??= await diskPrint($)
226}
227
228/**
229 * 新しい版が入ったのに、このセッションはまだ古い版で動いているか。
230 * フォルダから読ませている時は中身の指紋が読み込んだ時と違えば、マーケットプレイスから入れた時は
231 * 入っている場所が自分でなくなれば true。読み直すのは 60 秒に 1 回まで。分からない時は false
232 */
233export async function isStale($: EngineInterface, now: number): Promise<boolean> {
234  if (isStaleNow || now - staleAt < 60_000) return isStaleNow
235  staleAt = now
236  if (await replacedInCache($)) return (isStaleNow = true)
237  if (loadedPrint === undefined) return false
238  const p = await diskPrint($)
239  isStaleNow = p !== undefined && p !== loadedPrint
240  return isStaleNow
241}
242
243/**
244 * $.store に書いてよいか。古い版のままなら書かず、1 回だけトーストで開き直しを頼む
245 * (古い版は新しい版の欄を知らないので、書くと消してしまう)
246 */
247export async function mayWrite($: EngineInterface, now: number): Promise<boolean> {
248  if (!(await isStale($, now))) return true
249  if (!toldStale) {
250    toldStale = true
251    $.ui.toast(`${$.plugin.name}: 新しい版が入りました。VS Code を開き直すまで記録は書きません`)
252  }
253  return false
254}
255
256// ---- SVG の部品 ----
257
258export const W = 380
259export const HEADER_H = 44
260
261/** SVG 全体の枠。地を塗って body を入れる。幅は W にそろえる */
262export const frame = (h: number, body: string, w = W) =>
263  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}" font-family="sans-serif">` +
264  `<rect width="${w}" height="${h}" rx="10" fill="${C.bg}"/>${body}</svg>`
265
266/** 面(カード)。角丸 8、線 1 */
267export const panel = (x: number, y: number, w: number, h: number, fill = C.face) =>
268  `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="8" fill="${fill}" stroke="${C.line}"/>`
269
270/**
271 * 共通の見出し帯(高さ HEADER_H)。左に色の縦線、左に題、右に添え書き。
272 * 下の細い線が左から伸びる
273 */
274export function header(title: string, sub = '', accent = C.blue, y = 0, w = W) {
275  const pad = 14
276  return [
277    `<rect x="0" y="${y}" width="${w}" height="${HEADER_H}" rx="10" fill="${C.face}"/>`,
278    `<rect x="0" y="${y + 8}" width="4" height="${HEADER_H - 16}" rx="2" fill="${accent}"/>`,
279    `<text x="${pad}" y="${y + 28}" font-size="16" font-weight="bold" fill="${C.text}">${esc(title)}</text>`,
280    sub === '' ? '' : `<text x="${w - pad}" y="${y + 28}" font-size="12" fill="${C.dim}" text-anchor="end">${esc(sub)}</text>`,
281    growBar(pad, y + HEADER_H - 3, w - pad * 2, 2, accent, 0, 0.35),
282  ].join('')
283}
284
285/** 横に伸びる棒。幅 0 から w まで伸びて止まる(shots.mts は終わりの値で撮る) */
286export const growBar = (x: number, y: number, w: number, h: number, fill: string, delay = 0, opacity = 1) =>
287  `<rect x="${x}" y="${y}" width="${Math.max(0, w)}" height="${h}" rx="${Math.min(3, h / 2)}" fill="${fill}"${opacity === 1 ? '' : ` opacity="${opacity}"`}>` +
288  `<animate attributeName="width" from="0" to="${Math.max(0, w)}" begin="${delay}s" dur="0.6s" fill="freeze"/></rect>`
289
290/** 下から伸びる縦の棒(下端 bottom・高さ h) */
291export const growColumn = (x: number, bottom: number, w: number, h: number, fill: string, delay = 0) =>
292  `<rect x="${x}" y="${bottom - h}" width="${w}" height="${Math.max(0, h)}" rx="${Math.min(3, w / 2)}" fill="${fill}">` +
293  `<animate attributeName="y" from="${bottom}" to="${bottom - h}" begin="${delay}s" dur="0.6s" fill="freeze"/>` +
294  `<animate attributeName="height" from="0" to="${Math.max(0, h)}" begin="${delay}s" dur="0.6s" fill="freeze"/></rect>`
295
296/** ふわっと出る。中身は SVG の断片 */
297export const fadeIn = (body: string, delay = 0) =>
298  `<g opacity="1"><animate attributeName="opacity" from="0" to="1" begin="${delay}s" dur="0.4s" fill="freeze"/>${body}</g>`
299
300/**
301 * 0 から value まで数字が増えて止まる。コマ送りの文字を重ね、最後のコマだけが残る。
302 * attrs は <text> に付ける属性(x・y・font-size・fill など)。format で桁区切りや単位を付ける
303 */
304export function countUp(value: number, attrs: string, format: (n: number) => string = n => String(n), delay = 0) {
305  const STEPS = 8
306  const d = 0.08
307  const last = `<text ${attrs} opacity="0">${esc(format(value))}<animate attributeName="opacity" from="0" to="1" begin="${(delay + (STEPS - 1) * d).toFixed(2)}s" dur="0.01s" fill="freeze"/></text>`
308  if (!Number.isFinite(value) || value === 0) return `<text ${attrs}>${esc(format(value))}</text>`
309  const frames = Array.from({ length: STEPS - 1 }, (_, k) => {
310    const n = Number.isInteger(value) ? Math.round((value * k) / (STEPS - 1)) : (value * k) / (STEPS - 1)
311    return `<text ${attrs} opacity="0">${esc(format(n))}<animate attributeName="opacity" values="1;1" begin="${(delay + k * d).toFixed(2)}s" dur="${d}s"/></text>`
312  })
313  return frames.join('') + last
314}
315

1/** トークン数 4 種 (turn.complete の usage を読みやすい名前にした物) */
2export type TokenMeterUsage = { input: number; output: number; cacheRead: number; cacheWrite: number }
3
4/** 1 ターン分。n はセッションの中での通し番号 (1 から) */
5export type TokenMeterTurn = TokenMeterUsage & { n: number }
6
7declare module 'claude-code' {
8  interface PluginState {
9    'token-meter': {
10      /** メインループの直近 50 ターン、古い順 */
11      turns: TokenMeterTurn[]
12      /** メインループのセッション合計 */
13      total: TokenMeterUsage
14      /** サブエージェント (agentId 付きのターン) の合計と回数。メインとは別に数える */
15      sub: TokenMeterUsage & { runs: number }
16      /** メインループのターン数 (通し番号の元) */
17      count: number
18      /** 4 種の和が一番大きかったメインループのターン */
19      heaviest: TokenMeterTurn | null
20    }
21  }
22}
23