cc-dash

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { CcDashCall, CcDashLayout, CcDashPanel, CcDashTab, CcDashUsage } from '../types'
5import { knownOrder, layoutOf, move, objOf, PANEL_LABEL, reset, setShown, shownOf } from './layout'
6import { clean, clock, dur, gaugesSvg, left, overviewSvg, shortTool, TOOL_COLORS, timelineSvg, toolBarsSvg, turnsSvg } from './svg'
7import type { Gauge } from './svg'
8import { followTheme, mayWrite, readTheme, rememberVersion } from './style'
9
10const PANE = 'cc-dash'
11const TITLE = '計器盤'
12const KEEP_CALLS = 200
13const KEEP_TURNS = 20
14const LAYOUT_KEY = 'layout'
15
16const tabA = atom({ plugin: 'cc-dash', key: 'tab' } as const, 'overview' as CcDashTab)
17const startedA = atom({ plugin: 'cc-dash', key: 'startedAt' } as const, 0)
18const turnCountA = atom({ plugin: 'cc-dash', key: 'turnCount' } as const, 0)
19const turnDurA = atom({ plugin: 'cc-dash', key: 'turnDurations' } as const, [] as number[])
20const runningA = atom({ plugin: 'cc-dash', key: 'runningSince' } as const, null as number | null)
21const callsA = atom({ plugin: 'cc-dash', key: 'calls' } as const, [] as CcDashCall[])
22const countsA = atom({ plugin: 'cc-dash', key: 'toolCounts' } as const, {} as Record<string, number>)
23const totalA = atom({ plugin: 'cc-dash', key: 'toolTotal' } as const, 0)
24const errorsA = atom({ plugin: 'cc-dash', key: 'errorCount' } as const, 0)
25const usageA = atom({ plugin: 'cc-dash', key: 'usage' } as const, null as CcDashUsage | string | null)
26const layoutA = atom({ plugin: 'cc-dash', key: 'layout' } as const, layoutOf(undefined))
27const arrangingA = atom({ plugin: 'cc-dash', key: 'isArranging' } as const, false)
28
29const TABS: [CcDashTab, string][] = [
30  ['overview', '概要'],
31  ['tools', 'ツール'],
32  ['usage', '使用量'],
33  ['mine', '自分の並び'],
34]
35
36/** 各タブに出す枠 (自分の並びは store の順) */
37const TAB_PANELS: Record<Exclude<CcDashTab, 'mine'>, CcDashPanel[]> = {
38  overview: ['overview', 'turns'],
39  tools: ['toolBars', 'timeline'],
40  usage: ['usage'],
41}
42
43const UNSET = '使用量ファイルが未設定です。/config で cc-dash の usageFile に JSON の絶対パスを入れてください'
44
45// 絶対パス(/x、\x、C:\x、C:/x)だけを受け付ける。相対パスは今のフォルダから読まれてしまう
46const isAbsolute = (path: string) => /^(?:[\\/]|[A-Za-z]:[\\/])/.test(path)
47
48type $ = EngineInterface
49
50/** 使用量ファイルを読む。読めなければ理由の文字列 */
51const readUsage = async ($: $, file: string): Promise<CcDashUsage | string> => {
52  let raw: string
53  try {
54    raw = await $.fs.read(file)
55  } catch (err) {
56    return clean(`使用量ファイルを読めません: ${file} (${err instanceof Error ? err.message : String(err)})`)
57  }
58  try {
59    const u = JSON.parse(raw) as CcDashUsage | null
60    if (!u || typeof u.sessionPct !== 'number' || typeof u.weeklyPct !== 'number') throw new Error('bad')
61    return u
62  } catch {
63    return clean(`使用量ファイルを読めません: ${file} (中身の形が違います)`)
64  }
65}
66
67/** 使用量を読んで $.state に置く。描画フックの外(30 秒タイマーと使用量を出した時)で呼ぶ */
68async function refreshUsage($: $, file: string) {
69  if (file === '') return
70  const u = await readUsage($, file)
71  await update($, usageA, () => u)
72}
73
74/** 今のタブに出ている枠 */
75const panelsOf = async ($: $, tab: CcDashTab) => (tab === 'mine' ? shownOf(await read($, layoutA)) : TAB_PANELS[tab])
76
77// 並びの書き込みは 1 本ずつ流す (ボタンを続けて押しても読み直しと書き込みが重ならない)
78let chain: Promise<unknown> = Promise.resolve()
79const serial = (f: () => Promise<void>) => {
80  const p = chain.then(f, f)
81  chain = p.catch(() => {})
82  return p
83}
84
85/**
86 * 並びを変える。書く直前に store を読み直し、その値に変更を当てて、知らない欄と知らない枠は残して書く。
87 * 読めない時 (例外・形が違う) と、新しい版が入ったのに古い版のまま動いている時は、書かずに画面だけ変える
88 * (別のセッションや新しい版の並びを消さない)
89 */
90const changeLayout = ($: $, f: (l: CcDashLayout) => CcDashLayout) =>
91  serial(async () => {
92    let raw: unknown
93    try {
94      raw = await $.store.get(LAYOUT_KEY)
95    } catch {
96      await update($, layoutA, f)
97      return
98    }
99    if (!isLayoutShape(raw) || !(await mayWrite($, await $.clock.now()))) {
100      await update($, layoutA, f)
101      return
102    }
103    const next = f(layoutOf(raw))
104    await update($, layoutA, () => next)
105    await $.store.set(LAYOUT_KEY, { ...objOf(raw), ...next }).catch(() => {})
106  })
107
108/** store の並びとして読める形か (まだ無い・物で、order と hidden は無いか配列) */
109const isLayoutShape = (raw: unknown) => {
110  if (raw === undefined) return true
111  const o = objOf(raw)
112  return o === raw && (o.order === undefined || Array.isArray(o.order)) && (o.hidden === undefined || Array.isArray(o.hidden))
113}
114
115const gaugesOf = (u: CcDashUsage, now: number): Gauge[] => [
116  { label: '5時間枠', pct: u.sessionPct, left: left(u.sessionResetAt, now) },
117  { label: '週', pct: u.weeklyPct, left: left(u.weeklyResetAt, now) },
118  ...(typeof u.modelName === 'string' && typeof u.modelPct === 'number'
119    ? [{ label: `${clean(u.modelName)} 週`, pct: u.modelPct, left: left(u.modelResetAt, now) }]
120    : []),
121]
122
123const fetchedText = (u: CcDashUsage, now: number) =>
124  typeof u.fetchedAt === 'number' ? `取得: ${Math.max(0, Math.floor((now - u.fetchedAt) / 60_000))}分前` : ''
125
126export const register: Register = (on, options) => {
127  const raw = String(options.usageFile ?? '').trim()
128  // 絶対パスでなければ未設定と同じ扱い
129  const file = isAbsolute(raw) ? raw : ''
130  followTheme(on)
131
132  on('session.start', async ($, e, next) => {
133    await readTheme($)
134    await rememberVersion($).catch(() => {})
135    await $.command.register({ name: 'dash', description: 'セッションの計器盤をペインに表示' }).catch(() => {})
136    // リロードでも session.start は来る。最初の 1 回だけ時刻を入れる
137    const now = await $.clock.now()
138    await update($, startedA, v => v || now)
139    try {
140      const saved = await $.store.get(LAYOUT_KEY)
141      await update($, layoutA, () => layoutOf(saved))
142    } catch {
143      // 読めなければ初めの並びのまま
144    }
145    // 30 秒ごとに、数字が変わる時だけ描き直す (使用量は読み直して毎回、概要は経過の分が変わった時、ツールは実行中がある時)
146    let lastMinute = -1
147    $.clock.every(30_000, async () => {
148      const tab = await read($, tabA)
149      const shown = (await read($, arrangingA)) && tab === 'mine' ? [] : await panelsOf($, tab)
150      if (shown.includes('usage')) await refreshUsage($, file)
151      const minute = Math.floor(((await $.clock.now()) - (await read($, startedA))) / 60_000)
152      const isDue =
153        shown.includes('usage') ||
154        (shown.includes('overview') && minute !== lastMinute) ||
155        (shown.includes('timeline') && (await read($, callsA)).some(c => c.end === undefined))
156      lastMinute = minute
157      if (isDue) await $.ui.invalidate('ui.render')
158    })
159
160    return next(e)
161  })
162
163  // /clear で数え直す
164  on('session.end', async ($, e, next) => {
165    if (e.reason === 'clear') {
166      const now = await $.clock.now()
167      await update($, startedA, () => now)
168      await update($, turnCountA, () => 0)
169      await update($, turnDurA, () => [])
170      await update($, runningA, () => null)
171      await update($, callsA, () => [])
172      await update($, countsA, () => ({}))
173      await update($, totalA, () => 0)
174      await update($, errorsA, () => 0)
175    }
176    return next(e)
177  })
178
179  on('command.run', { command: 'dash' }, async $ => {
180    await $.ui.open({ id: PANE, title: TITLE })
181
182    return { text: '計器盤を開きました。' }
183  })
184
185  // メインループのターンだけ数える (サブエージェントのターンは agentId 付きで来る)
186  on('turn.start', async ($, e, next) => {
187    if (e.agentId === undefined) {
188      const now = await $.clock.now()
189      await update($, runningA, () => now)
190    }
191    return next(e)
192  })
193
194  on('turn.complete', async ($, e, next) => {
195    if (e.agentId === undefined) {
196      await update($, turnDurA, list => [...list, e.durationMs].slice(-KEEP_TURNS))
197      await update($, turnCountA, n => n + 1)
198      await update($, runningA, () => null)
199      // 答えが返らないまま終わった呼び出し(中断など)を締める。エラーには数えない
200      const end = await $.clock.now()
201      await update($, callsA, list => (list.some(c => c.end === undefined) ? list.map(c => (c.end === undefined ? { ...c, end } : c)) : list))
202    }
203    return next(e)
204  })
205
206  // 見るだけのフック。落ちても呼び出しは止めない (.catch で next の結果をそのまま返す)
207  on('tool.call', async ($, e, next) => {
208    if (e.agentId !== undefined) return next(e)
209    const tool = clean(String(e.tool))
210    const start = await $.clock.now()
211    const id = e.tool_use_id ?? `${tool}-${start}-${Math.random()}`
212    await update($, callsA, list => [...list, { id, tool, start, isError: false }].slice(-KEEP_CALLS))
213    await update($, countsA, c => ({ ...c, [tool]: (c[tool] ?? 0) + 1 }))
214    await update($, totalA, n => n + 1)
215
216    // 中断(next が投げる)・deny はエラーに数えない (work-bar とそろえる)
217    let isError = false
218    try {
219      const r = await next(e)
220      isError = r.isError === true
221      return r
222    } finally {
223      const end = await $.clock.now()
224      await update($, callsA, list => list.map(c => (c.id === id ? { ...c, end, isError } : c)))
225      if (isError) await update($, errorsA, n => n + 1)
226    }
227  }).catch(($, e, next) => next(e))
228
229  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
230    const t = $.ui.resolve(e)
231    const { Box, Text, Button } = t
232    const tab = await read($, tabA)
233    const now = await $.clock.now()
234
235    const tabs = (
236      <Box key="tabs" flexDirection="row" flexWrap="wrap" gap={1}>
237        {TABS.map(([id, label]) => (
238          <Button
239            key={`tab-${id}`} dimColor={tab !== id}
240            label={label}
241            variant={tab === id ? 'primary' : 'secondary'}
242            onPress={async () => {
243              await update($, tabA, () => id)
244              // 使用量を出すタブを開いた時に読む
245              if ((await panelsOf($, id)).includes('usage')) await refreshUsage($, file)
246            }}
247          />
248        ))}
249      </Box>
250    )
251
252    // terminal の部品表にも Svg の名前はあるので、画面の種類でも分ける
253    const Svg = e.surface !== 'terminal' && 'Svg' in t ? t.Svg : undefined
254
255    // ツールの色は回数の順位で決まる。回数を読む(購読する)のは、ツールの枠を描く時だけ
256    const colorFn = async () => {
257      const counts = await read($, countsA)
258      const ranked = Object.entries(counts).sort((a, b) => b[1] - a[1])
259      const rank = new Map(ranked.map(([tool], i) => [tool, i]))
260      return { ranked, colorOf: (tool: string) => TOOL_COLORS[(rank.get(tool) ?? 0) % TOOL_COLORS.length] ?? TOOL_COLORS[0]! }
261    }
262
263    /** 枠 1 つ。読むのはその枠に要る値だけ */
264    const panel = async (id: CcDashPanel) => {
265      if (id === 'overview') {
266        const startedAt = await read($, startedA)
267        const o = {
268          elapsedMs: startedAt ? now - startedAt : 0,
269          turns: await read($, turnCountA),
270          tools: await read($, totalA),
271          errors: await read($, errorsA),
272          isRunning: (await read($, runningA)) !== null,
273        }
274        return Svg ? (
275          <Svg key="header" source={overviewSvg(o)} alt={`経過 ${clock(o.elapsedMs)} ターン ${o.turns} ツール ${o.tools} エラー ${o.errors}`} />
276        ) : (
277          <Box key="overview" flexDirection="column">
278            <Text key="status" color={o.isRunning ? 'green' : undefined}>{o.isRunning ? '● 実行中' : '○ 待機中'}</Text>
279            <Text key="summary">{`経過 ${clock(o.elapsedMs)}  ターン ${o.turns}  ツール ${o.tools}  エラー ${o.errors}`}</Text>
280          </Box>
281        )
282      }
283      if (id === 'turns') {
284        const durations = await read($, turnDurA)
285        return Svg ? (
286          <Svg key="turns" source={turnsSvg(durations)} alt="直近20ターンの所要時間の棒グラフ" />
287        ) : (
288          <Text key="last" dimColor>
289            {durations.length ? `最新ターン ${dur(durations[durations.length - 1] ?? 0)}` : 'まだ完了したターンがありません'}
290          </Text>
291        )
292      }
293      if (id === 'toolBars') {
294        const { ranked, colorOf } = await colorFn()
295        const top = ranked.slice(0, 8)
296        const total = await read($, totalA)
297        return Svg ? (
298          <Svg key="tool-bars" source={toolBarsSvg(top, total, colorOf)} alt="ツール別の呼び出し回数の横棒グラフ" />
299        ) : (
300          <Box key="tool-counts" flexDirection="column">
301            {top.length === 0 && <Text dimColor>まだ呼び出しがありません</Text>}
302            {top.map(([tool, n]) => (
303              <Text key={`count-${tool}`}>{`${shortTool(tool)} ${n}`}</Text>
304            ))}
305          </Box>
306        )
307      }
308      if (id === 'timeline') {
309        const { colorOf } = await colorFn()
310        const calls = await read($, callsA)
311        if (Svg) return <Svg key="timeline" source={timelineSvg(calls, now, colorOf)} alt="直近30回の呼び出しのタイムライン" />
312        const recent = calls.slice(-30)
313        const running = recent.filter(c => c.end === undefined).length
314        const failed = recent.filter(c => c.isError).length
315        return (
316          <Text key="timeline-text" dimColor>
317            {recent.length ? `直近${recent.length}回の呼び出し  実行中 ${running}  失敗 ${failed}` : '直近の呼び出しはまだありません'}
318          </Text>
319        )
320      }
321      // 使用量: 描画では読まない。読むのは 30 秒タイマーと使用量を出した時
322      const u = file === '' ? UNSET : ((await read($, usageA)) ?? '読み込み中…')
323      if (typeof u === 'string') {
324        return (
325          <Text key="usage-error" dimColor>
326            {u}
327          </Text>
328        )
329      }
330      const gauges = gaugesOf(u, now)
331      return Svg ? (
332        <Svg key="gauges" source={gaugesSvg(gauges, fetchedText(u, now))} alt={gauges.map(g => `${g.label} ${g.pct}%`).join(' ')} />
333      ) : (
334        <Box key="usage" flexDirection="column">
335          {gauges.map(g => (
336            <Text key={`gauge-${g.label}`} color={g.pct > 80 ? 'red' : g.pct > 50 ? 'yellow' : undefined}>
337              {`${g.label} ${Math.round(g.pct)}% ${g.left}`}
338            </Text>
339          ))}
340        </Box>
341      )
342    }
343
344    const panels = async (ids: CcDashPanel[]) => {
345      const out = []
346      for (const id of ids) out.push(await panel(id))
347      return out
348    }
349
350    let body
351    if (tab !== 'mine') {
352      body = (
353        <Box key={tab} flexDirection="column" gap={1}>
354          {await panels(TAB_PANELS[tab])}
355        </Box>
356      )
357    } else if (await read($, arrangingA)) {
358      // 並べ替えの画面: 枠ごとに名前と「上へ」「下へ」「出す」/「隠す」
359      const layout = await read($, layoutA)
360      const order = knownOrder(layout)
361      body = (
362        <Box key="arrange" flexDirection="column" gap={1}>
363          <Text dimColor>出す枠を選び、上から出す順に並べます</Text>
364          {order.map((id, i) => {
365            const isHidden = layout.hidden.includes(id)
366            return (
367              <Box key={`row-${id}`} flexDirection="column">
368                <Text key={`name-${id}`} bold={!isHidden} dimColor={isHidden}>
369                  {`${i + 1}. ${PANEL_LABEL[id]}${isHidden ? '  隠しています' : ''}`}
370                </Text>
371                <Box flexDirection="row" flexWrap="wrap" gap={1}>
372                  {i > 0 && <Button key={`up-${id}`} dimColor label="上へ" onPress={() => changeLayout($, l => move(l, id, -1))} />}
373                  {i < order.length - 1 && <Button key={`down-${id}`} dimColor label="下へ" onPress={() => changeLayout($, l => move(l, id, 1))} />}
374                  {isHidden ? (
375                    <Button key={`show-${id}`} dimColor label="出す" onPress={() => changeLayout($, l => setShown(l, id, true))} />
376                  ) : (
377                    <Button key={`hide-${id}`} dimColor label="隠す" onPress={() => changeLayout($, l => setShown(l, id, false))} />
378                  )}
379                </Box>
380              </Box>
381            )
382          })}
383          <Box flexDirection="row" flexWrap="wrap" gap={1}>
384            <Button
385              key="arrange-done"
386              label="並べ終わる"
387              variant="primary"
388              onPress={async () => {
389                await update($, arrangingA, () => false)
390                if (shownOf(await read($, layoutA)).includes('usage')) await refreshUsage($, file)
391              }}
392            />
393            <Button key="arrange-reset" dimColor label="初めの並びに戻す" onPress={() => changeLayout($, reset)} />
394          </Box>
395        </Box>
396      )
397    } else {
398      const shown = shownOf(await read($, layoutA))
399      body = (
400        <Box key="mine" flexDirection="column" gap={1}>
401          {shown.length === 0 ? <Text dimColor>出す枠がありません。「並べ替える」で選んでください</Text> : await panels(shown)}
402          <Button key="arrange" dimColor label="並べ替える" onPress={() => update($, arrangingA, () => true)} />
403        </Box>
404      )
405    }
406
407    return (
408      <Box flexDirection="column" gap={1}>
409        {tabs}
410        {body}
411      </Box>
412    )
413  })
414}
415

1// 「自分の並び」の枠の順と隠す枠。store の 'layout' に { order, hidden } で残す。
2// 知らない枠の名前(新しい版で足された枠)と知らない欄は消さずに書き戻す
3import type { CcDashLayout, CcDashPanel } from '../types'
4
5export const PANELS: readonly CcDashPanel[] = ['overview', 'turns', 'toolBars', 'timeline', 'usage']
6
7export const PANEL_LABEL: Record<CcDashPanel, string> = {
8  overview: 'セッションのタイル',
9  turns: 'ターンの所要時間',
10  toolBars: 'ツール別の回数',
11  timeline: '直近の呼び出し',
12  usage: '使用量',
13}
14
15export const isPanel = (v: unknown): v is CcDashPanel => PANELS.includes(v as CcDashPanel)
16
17/** 物なら中身、そうでなければ空 (知らない欄を残すための元) */
18export const objOf = (v: unknown): Record<string, unknown> =>
19  typeof v === 'object' && v !== null && !Array.isArray(v) ? (v as Record<string, unknown>) : {}
20
21const strings = (v: unknown) => (Array.isArray(v) ? [...new Set(v.filter((x): x is string => typeof x === 'string'))] : [])
22
23/** store の生の値を並びにする。足りない枠は後ろに足す。知らない名前はその場に残す */
24export function layoutOf(raw: unknown): CcDashLayout {
25  const o = objOf(raw)
26  const order = strings(o.order)
27  return { order: [...order, ...PANELS.filter(p => !order.includes(p))], hidden: strings(o.hidden) }
28}
29
30/** 画面に出す順 (知っている枠だけ) */
31export const knownOrder = (l: CcDashLayout) => l.order.filter(isPanel)
32export const shownOf = (l: CcDashLayout) => knownOrder(l).filter(p => !l.hidden.includes(p))
33
34/** 隣の知っている枠と入れ替える。知らない名前は飛ばして、その位置に残す */
35export function move(l: CcDashLayout, id: CcDashPanel, dir: -1 | 1): CcDashLayout {
36  const order = [...l.order]
37  const i = order.indexOf(id)
38  let j = i + dir
39  while (j >= 0 && j < order.length && !isPanel(order[j])) j += dir
40  if (i < 0 || j < 0 || j >= order.length) return l
41  ;[order[i], order[j]] = [order[j]!, order[i]!]
42  return { ...l, order }
43}
44
45export const setShown = (l: CcDashLayout, id: CcDashPanel, isShown: boolean): CcDashLayout => ({
46  ...l,
47  hidden: isShown ? l.hidden.filter(h => h !== id) : [...l.hidden.filter(h => h !== id), id],
48})
49
50/** 初めの並びに戻す (知らない名前はそのまま後ろに残す) */
51export const reset = (l: CcDashLayout): CcDashLayout => ({
52  order: [...PANELS, ...l.order.filter(p => !isPanel(p))],
53  hidden: l.hidden.filter(p => !isPanel(p)),
54})
55

1// SVG を文字列で組む関数。描画面は <img> なので SMIL だけで動かす
2import type { CcDashCall } from '../types'
3import { C, HEADER_H, W, clean, countUp, esc, frame, growBar, header } from './style'
4
5// ツールの色。赤はエラー専用なので外す。テーマに付いていくよう、要素を読むたびに C から引く
6// (配列の形のままにしておく。tools/shots.mts が TOOL_COLORS[i % TOOL_COLORS.length] と読む)
7const TOOL_KEYS = ['blue', 'green', 'purple', 'orange', 'yellow'] as const
8export const TOOL_COLORS: readonly string[] = TOOL_KEYS.reduce(
9  (a, k, i) => Object.defineProperty(a, i, { get: () => C[k], enumerable: true }),
10  [] as string[],
11)
12
13export { clean, esc }
14
15const cut = (s: string, n: number) => (s.length > n ? `${s.slice(0, n - 2)}..` : s)
16
17/** mcp__server__tool は最後の部分だけにする */
18export const shortTool = (tool: string) => (tool.startsWith('mcp__') ? tool.split('__').pop() || tool : tool)
19
20/** 経過時間 h:mm */
21export const clock = (ms: number) => {
22  const min = Math.max(0, Math.floor(ms / 60_000))
23  return `${Math.floor(min / 60)}:${String(min % 60).padStart(2, '0')}`
24}
25
26/** 所要時間 12秒 / 3分5秒 / 0.4秒 */
27export const dur = (ms: number) => {
28  if (ms < 10_000) return `${(Math.max(0, ms) / 1000).toFixed(1)}秒`
29  const s = Math.round(ms / 1000)
30  return s < 60 ? `${s}秒` : `${Math.floor(s / 60)}分${s % 60}秒`
31}
32
33/** リセットまでの残り (usage-pane の left() を写した物) */
34export const left = (iso: unknown, now: number) => {
35  // 小数秒が 6 桁でも読めるよう 3 桁に切る
36  const at = typeof iso === 'string' ? Date.parse(iso.replace(/(\.\d{3})\d+/, '$1')) : NaN
37  if (Number.isNaN(at)) return ''
38  if (at <= now) return 'リセット済み'
39  const min = Math.floor((at - now) / 60_000)
40  const d = Math.floor(min / 1440)
41  const h = Math.floor(min / 60) % 24
42  const m = min % 60
43  return d > 0 ? `あと${d}日${h}時間` : h > 0 ? `あと${h}時間${m}分` : `あと${m}分`
44}
45
46const text = (x: number, y: number, s: string, size: number, fill: string, extra = '') =>
47  `<text x="${x}" y="${y}" font-size="${size}" fill="${fill}" ${extra}>${esc(s)}</text>`
48
49/** 見出しの下から中身を始める y */
50const TOP = HEADER_H + 12
51
52// ---- 概要 ----
53// 概要はツールを呼ぶたびに描き直す(数字が変わる)ので、動きは足さない (mod-guide 2 節)
54
55export type Overview = { elapsedMs: number; turns: number; tools: number; errors: number; isRunning: boolean }
56
57export const overviewSvg = (o: Overview) => {
58  const pulse = o.isRunning
59    ? `<circle cx="${W - 74}" cy="23" r="5" fill="${C.green}">` +
60      `<animate attributeName="r" values="4;9;4" dur="1.4s" repeatCount="indefinite"/>` +
61      `<animate attributeName="opacity" values="1;0.25;1" dur="1.4s" repeatCount="indefinite"/></circle>` +
62      `<circle cx="${W - 74}" cy="23" r="3.5" fill="${C.green}"/>` +
63      text(W - 16, 28, '実行中', 13, C.green, 'text-anchor="end" font-weight="bold"')
64    : text(W - 16, 28, '待機中', 13, C.dim, 'text-anchor="end"')
65  const tw = (W - 32 - 12) / 2
66  const th = 74
67  const tile = (i: number, label: string, value: string, edge: string, valueFill: string = C.text) => {
68    const x = 16 + (i % 2) * (tw + 12)
69    const y = TOP + Math.floor(i / 2) * (th + 12)
70    return (
71      `<rect x="${x}" y="${y}" width="${tw}" height="${th}" rx="8" fill="${C.face}" stroke="${edge}" stroke-width="1.5"/>` +
72      `<rect x="${x + 10}" y="${y}" width="${tw - 20}" height="3" fill="${edge}"/>` +
73      text(x + 12, y + 24, label, 12, C.dim) +
74      text(x + 12, y + 60, value, 28, valueFill, 'font-weight="bold"')
75    )
76  }
77  return frame(
78    TOP + th * 2 + 12 + 16,
79    header('セッション', '', o.isRunning ? C.green : C.blue) +
80      pulse +
81      tile(0, '経過 (時:分)', clock(o.elapsedMs), C.blue) +
82      tile(1, 'ターン', String(o.turns), C.green) +
83      tile(2, 'ツール呼び出し', String(o.tools), C.yellow) +
84      tile(3, 'エラー', String(o.errors), C.red, o.errors > 0 ? C.red : C.text),
85  )
86}
87
88export const turnColor = (ms: number) => (ms > 300_000 ? C.red : ms > 120_000 ? C.yellow : C.blue)
89
90/** ターンが終わった時だけ中身が変わるので、棒は左から順に伸ばす */
91export const turnsSvg = (durations: number[]) => {
92  const h = 222
93  const recent = durations.slice(-20)
94  const last = recent[recent.length - 1]
95  if (last === undefined) {
96    return frame(h, header('直近20ターンの所要時間') + text(W / 2, 132, 'まだ完了したターンがありません', 13, C.dim, 'text-anchor="middle"'))
97  }
98  const x0 = 52
99  const top = TOP + 4
100  const base = 180
101  const plotH = base - top
102  const max = Math.max(...recent, 1000)
103  const slot = (W - 16 - x0) / 20
104  const bw = Math.max(4, slot - 5)
105  // 120 秒・300 秒の目安線 (縦軸に入る時だけ)
106  const guide = (ms: number, color: string) => {
107    if (ms > max) return ''
108    const y = base - (ms / max) * plotH
109    return `<line x1="${x0}" y1="${y}" x2="${W - 16}" y2="${y}" stroke="${color}" stroke-dasharray="4 4" opacity="0.6"/>`
110  }
111  const bars = recent
112    .map((ms, i) => {
113      const bh = Math.max(2, (ms / max) * plotH)
114      const x = x0 + i * slot + (slot - bw) / 2
115      const isLast = i === recent.length - 1
116      const color = turnColor(ms)
117      const op = isLast || color !== C.blue ? 1 : 0.45
118      const begin = `begin="${(i * 0.03).toFixed(2)}s"`
119      return (
120        `<rect x="${x}" y="${base - bh}" width="${bw}" height="${bh}" rx="2" fill="${color}" opacity="${op}">` +
121        `<animate attributeName="height" from="0" to="${bh}" ${begin} dur="0.6s" fill="freeze"/>` +
122        `<animate attributeName="y" from="${base}" to="${base - bh}" ${begin} dur="0.6s" fill="freeze"/></rect>` +
123        (isLast ? `<rect x="${x - 2}" y="${base + 4}" width="${bw + 4}" height="3" rx="1.5" fill="${color}"/>` : '')
124      )
125    })
126    .join('')
127  const avg = recent.reduce((a, b) => a + b, 0) / recent.length
128  return frame(
129    h,
130    header('直近20ターンの所要時間', `最新 ${dur(last)}`, turnColor(last)) +
131      text(x0 - 6, top + 4, dur(max), 12, C.dim, 'text-anchor="end"') +
132      text(x0 - 6, base, '0', 12, C.dim, 'text-anchor="end"') +
133      `<line x1="${x0}" y1="${top}" x2="${W - 16}" y2="${top}" stroke="${C.line}"/>` +
134      `<line x1="${x0}" y1="${base}" x2="${W - 16}" y2="${base}" stroke="${C.line}"/>` +
135      guide(120_000, C.yellow) +
136      guide(300_000, C.red) +
137      bars +
138      text(16, 208, `平均 ${dur(avg)}  /  2分超は黄、5分超は赤`, 12, C.dim),
139  )
140}
141
142// ---- ツール ----
143
144export const toolBarsSvg = (top: [string, number][], total: number, colorOf: (tool: string) => string) => {
145  const row = 28
146  const h = TOP + Math.max(1, top.length) * row + 8
147  if (top.length === 0) {
148    return frame(h + 20, header('ツール別の呼び出し回数') + text(W / 2, 92, 'まだ呼び出しがありません', 13, C.dim, 'text-anchor="middle"'))
149  }
150  const max = Math.max(...top.map(([, n]) => n))
151  const bx = 124
152  const bmax = W - bx - 56
153  const rows = top
154    .map(([tool, n], i) => {
155      const y = TOP + i * row
156      const w = Math.max(3, (n / max) * bmax)
157      return (
158        text(16, y + 15, cut(shortTool(tool), 12), 12, C.text) +
159        growBar(bx, y + 2, w, 16, colorOf(tool), i * 0.05) +
160        text(bx + w + 6, y + 15, String(n), 12, C.dim)
161      )
162    })
163    .join('')
164  return frame(h, header('ツール別の呼び出し回数', `計 ${total}回`) + rows)
165}
166
167/** 実行中は 30 秒ごとに描き直すので、流れる縞のほかに動きは足さない */
168export const timelineSvg = (calls: CcDashCall[], now: number, colorOf: (tool: string) => string) => {
169  const row = 20
170  const list = calls.slice(-30)
171  const h = TOP + Math.max(1, list.length) * row + 20
172  if (list.length === 0) {
173    return frame(h + 20, header('直近30回の呼び出し') + text(W / 2, 92, 'まだ呼び出しがありません', 13, C.dim, 'text-anchor="middle"'))
174  }
175  const len = (c: CcDashCall) => Math.max(0, (c.end ?? now) - c.start)
176  const max = Math.max(...list.map(len), 1)
177  const bmax = 210
178  const running = list.filter(c => c.end === undefined).length
179  const errors = list.filter(c => c.isError).length
180  const bands = list
181    .map((c, i) => {
182      const y = TOP + i * row
183      const w = Math.max(3, (len(c) / max) * bmax)
184      const isRunning = c.end === undefined
185      const color = c.isError ? C.red : isRunning ? C.blue : colorOf(c.tool)
186      // 実行中は太い破線の dashoffset を流して縞にする (pattern より描ける所が多い)
187      const band = isRunning
188        ? `<rect x="16" y="${y}" width="${w}" height="14" rx="3" fill="${C.blue}" opacity="0.3"/>` +
189          `<line x1="16" y1="${y + 7}" x2="${16 + w}" y2="${y + 7}" stroke="${C.blue}" stroke-width="14" stroke-dasharray="6 6">` +
190          `<animate attributeName="stroke-dashoffset" from="12" to="0" dur="0.6s" repeatCount="indefinite"/></line>`
191        : `<rect x="16" y="${y}" width="${w}" height="14" rx="3" fill="${color}" opacity="${c.isError ? 1 : 0.85}"/>`
192      const label = `${cut(shortTool(c.tool), 12)} ${isRunning ? '実行中' : dur(len(c))}`
193      return band + text(16 + w + 6, y + 12, label, 12, c.isError ? C.red : C.text)
194    })
195    .join('')
196  const right = [running ? `実行中 ${running}` : '', errors ? `失敗 ${errors}` : ''].filter(Boolean).join(' / ')
197  return frame(h, header('直近30回の呼び出し', right, errors ? C.red : C.blue) + bands + text(16, h - 10, '上が古く下が新しい。幅は所要時間', 12, C.dim))
198}
199
200// ---- 使用量 ----
201
202export type Gauge = { label: string; pct: number; left: string }
203
204export const gaugeColor = (pct: number) => (pct > 80 ? C.red : pct > 50 ? C.yellow : C.green)
205
206/** 30 秒ごとに読み直すが、source が変わるのは残りの分が変わる時だけ。輪と数字は 1 回だけ伸びる */
207export const gaugesSvg = (gauges: Gauge[], footer: string) => {
208  const h = 214
209  const col = W / gauges.length
210  const r = 38
211  const circ = 2 * Math.PI * r
212  const rings = gauges
213    .map((g, i) => {
214      const cx = col * i + col / 2
215      const cy = 132
216      const p = Math.min(100, Math.max(0, g.pct))
217      const d = (circ * p) / 100
218      const color = gaugeColor(p)
219      return (
220        text(cx, 74, cut(g.label, 9), 12, C.text, 'text-anchor="middle" font-weight="bold"') +
221        `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${C.line}" stroke-width="10"/>` +
222        `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${color}" stroke-width="10" stroke-linecap="${p > 0 ? 'round' : 'butt'}" ` +
223        `stroke-dasharray="${d.toFixed(1)} ${circ.toFixed(1)}" transform="rotate(-90 ${cx} ${cy})">` +
224        `<animate attributeName="stroke-dasharray" from="0 ${circ.toFixed(1)}" to="${d.toFixed(1)} ${circ.toFixed(1)}" dur="0.9s" fill="freeze"/></circle>` +
225        countUp(Math.round(p), `x="${cx}" y="${cy + 7}" font-size="20" fill="${color}" text-anchor="middle" font-weight="bold"`, n => `${n}%`) +
226        text(cx, 194, g.left, 12, C.dim, 'text-anchor="middle"')
227      )
228    })
229    .join('')
230  return frame(h, header('使用量', footer, C.green) + rings)
231}
232

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

1export type CcDashTab = 'overview' | 'tools' | 'usage' | 'mine'
2
3/** 「自分の並び」に置ける枠 */
4export type CcDashPanel = 'overview' | 'turns' | 'toolBars' | 'timeline' | 'usage'
5
6/** 「自分の並び」の順と隠す枠。知らない名前(新しい版の枠)も残すので string */
7export type CcDashLayout = { order: string[]; hidden: string[] }
8
9/** ツール呼び出し 1 回の記録。end が無いものは実行中 */
10export type CcDashCall = { id: string; tool: string; start: number; end?: number; isError: boolean }
11
12/** 使用量ファイルの中身(読めた分) */
13export type CcDashUsage = {
14  sessionPct: number
15  weeklyPct: number
16  sessionResetAt?: unknown
17  weeklyResetAt?: unknown
18  modelName?: unknown
19  modelPct?: unknown
20  modelResetAt?: unknown
21  fetchedAt?: unknown
22}
23
24declare module 'claude-code' {
25  interface PluginState {
26    'cc-dash': {
27      tab: CcDashTab
28      /** 計測を始めた時刻 (ms)。0 は未設定 */
29      startedAt: number
30      turnCount: number
31      /** 直近 20 ターンの所要時間 (ms)、古い順 */
32      turnDurations: number[]
33      /** メインループのターンが走っていれば開始時刻、無ければ null */
34      runningSince: number | null
35      /** 直近 200 回の呼び出し、古い順 */
36      calls: CcDashCall[]
37      /** ツール名ごとの通算回数 */
38      toolCounts: Record<string, number>
39      toolTotal: number
40      errorCount: number
41      /** 最後に読んだ使用量。文字列は読めなかった理由、null はまだ読んでいない */
42      usage: CcDashUsage | string | null
43      /** 「自分の並び」(store の写し) */
44      layout: CcDashLayout
45      /** 「自分の並び」で並べ替えの画面を開いているか */
46      isArranging: boolean
47    }
48  }
49}
50