work-bar

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register, Timer } from 'claude-code'
3
4import { followTheme, readTheme } from './style'
5import { barSvg, clean, clock, flowColor, flowSvg, lastSvg, parsePresets, short } from './svg'
6
7const run = atom({ plugin: 'work-bar', key: 'run' } as const, null)
8const last = atom({ plugin: 'work-bar', key: 'last' } as const, null)
9const isHidden = atom({ plugin: 'work-bar', key: 'isHidden' } as const, false)
10const pick = atom({ plugin: 'work-bar', key: 'pick' } as const, '0')
11
12// これより多いと Select + 「入れる」に切り替える
13const MAX_BUTTONS = 4
14
15// 実行中だけ回す 1 秒タイマー。リロードで消えるので、session.start で run が残っていれば作り直す
16let tick: Timer | undefined
17function startTick($: EngineInterface) {
18  tick?.cancel()
19  tick = $.clock.every(1000, () => {
20    void (async () => {
21      const now = await $.clock.now()
22      await update($, run, r => (r ? { ...r, elapsed: Math.floor((now - r.startedAt) / 1000) } : r))
23    })()
24  })
25}
26
27export const register: Register = (on, options) => {
28  const presets = parsePresets(String(options.presets ?? ''))
29  followTheme(on)
30
31  on('session.start', async ($, e, next) => {
32    await readTheme($)
33    await $.command.register({ name: 'work-bar', description: '作業バーの表示を切り替える' }).catch(() => {})
34    // VS Code は帯を「フック無し」と 2 回見ると聞きに来なくなる。後から読み込まれた時のために描き直しを頼む
35    $.ui.invalidate('ui.render')
36    // ターンの途中でリロードされた: 経過時間を止めないようタイマーを作り直す
37    if ((await read($, run)) !== null) startTick($)
38
39    return next(e)
40  })
41
42  on('command.run', { command: 'work-bar' }, async $ => {
43    const hidden = await update($, isHidden, v => !v)
44
45    return { text: hidden ? '作業バーを隠しました。' : '作業バーを表示しました。' }
46  })
47
48  // サブエージェントのターン (agentId あり) は数えない
49  on('turn.start', async ($, e, next) => {
50    if (e.agentId === undefined) {
51      const startedAt = await $.clock.now()
52      await update($, run, () => ({ startedAt, elapsed: 0, calls: 0, errors: 0, active: [], lastError: false }))
53      $.ui.invalidate('ui.render')
54      startTick($)
55    }
56
57    return next(e)
58  })
59
60  on('tool.call', async ($, e, next) => {
61    if (e.agentId !== undefined) return next(e)
62    const name = clean(String(e.tool))
63    await update($, run, r => (r ? { ...r, calls: r.calls + 1, active: [...r.active, name] } : r))
64    let isError = false
65    try {
66      const ran = await next(e)
67      isError = ran.isError === true
68
69      return ran
70    } finally {
71      await update($, run, r => {
72        if (!r) return r
73        const i = r.active.lastIndexOf(name)
74        const active = i < 0 ? r.active : [...r.active.slice(0, i), ...r.active.slice(i + 1)]
75        return { ...r, active, lastError: isError, errors: r.errors + (isError ? 1 : 0) }
76      })
77    }
78  }).catch(($, e, next) => next(e)) // 見ているだけなので、失敗してもツールは止めない
79
80  on('turn.complete', async ($, e, next) => {
81    if (e.agentId === undefined) {
82      tick?.cancel()
83      tick = undefined
84      const r = await read($, run)
85      await update($, last, () => ({
86        seconds: Math.round(e.durationMs / 1000),
87        calls: r?.calls ?? 0,
88        errors: r?.errors ?? 0,
89      }))
90      await update($, run, () => null)
91    }
92
93    return next(e)
94  })
95
96  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
97    if (e.props.hasSurvey || (await read($, isHidden))) return next(e)
98
99    // face-band など、帯を描く他の mod がこの下にいればその木が返る。自分の帯の下に並べる
100    const below = await next(e)
101    const own = await drawOwn()
102    if (below.type === 'engine') return own
103    const { Box } = $.ui.resolve(e)
104    return (
105      <Box flexDirection="column">
106        <Box key="own">{own}</Box>
107        <Box key="below">{below}</Box>
108      </Box>
109    )
110
111    async function drawOwn() {
112      const r = await read($, run)
113      const l = await read($, last)
114      // 定型を減らして選んでいた番号が範囲外になったら 0 番に戻す
115      const stored = await read($, pick)
116      const picked = presets[Number(stored)] ? stored : '0'
117      const t = $.ui.resolve(e)
118      const { Box, Text, Button } = t
119
120      const fill = (text: string) => void $.prompt.fill({ text, mode: 'insert' })
121      const hide = () => update($, isHidden, () => true)
122
123      // 待機中: 定型ボタン列 (多ければ Select) と「隠す」
124      const controls = (
125        <Box key="controls" flexDirection="row" flexWrap="wrap" columnGap={1}>
126          {presets.length > MAX_BUTTONS && 'Select' in t
127            ? [
128                <t.Select
129                  key="pick"
130                  label="定型"
131                  value={picked}
132                  options={presets.map((p, i) => ({ label: p.label, value: String(i) }))}
133                  onSelect={v => update($, pick, () => v)}
134                />,
135                <Button
136                  key="fill"
137                  label="入れる"
138                  onPress={() => {
139                    const text = presets[Number(picked)]?.text ?? ''
140                    if (text !== '') fill(text)
141                  }}
142                />,
143              ]
144            : presets.map((p, i) => <Button key={`preset-${i}`} label={p.label} onPress={() => fill(p.text)} />)}
145          <Button key="hide" dimColor label="隠す" onPress={hide} />
146        </Box>
147      )
148
149      // terminal の表にも Svg の名前はある (テストキットで確認) ので、surface でも分ける
150      if (e.surface === 'terminal' || !('Svg' in t)) {
151        // terminal: Text 1 行の簡易表示
152        const line = r
153          ? `${r.lastError ? '● ' : ''}${clock(r.elapsed)}  ${r.active.length ? short(r.active[r.active.length - 1] ?? '') : '考え中'}  ツール ${r.calls}回`
154          : l
155            ? `前のターン ${clock(l.seconds)} / ツール ${l.calls}回 / エラー ${l.errors}件`
156            : ''
157        return (
158          <Box flexDirection="column">
159            {line !== '' && (
160              <Text color={r?.lastError ? 'red' : undefined} dimColor={!r}>
161                {line}
162              </Text>
163            )}
164            {!r && controls}
165          </Box>
166        )
167      }
168
169      const { Svg } = t
170      if (r) {
171        const tool = r.active[r.active.length - 1] ?? null
172        return (
173          <Box flexDirection="column">
174            <Svg
175              source={barSvg({ elapsed: r.elapsed, tool, calls: r.calls, lastError: r.lastError })}
176              alt={`経過 ${clock(r.elapsed)} / ${tool ?? '考え中'} / ツール ${r.calls}回`}
177            />
178            <Svg source={flowSvg(flowColor(r.elapsed))} alt="実行中" />
179          </Box>
180        )
181      }
182
183      return (
184        <Box flexDirection="column" rowGap={0}>
185          {l && <Svg source={lastSvg(l)} alt={`前のターン ${clock(l.seconds)} / ツール ${l.calls}回 / エラー ${l.errors}件`} />}
186          {controls}
187        </Box>
188      )
189    }
190  })
191}
192

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

1import type { WorkBarLast } from '../types'
2import { C, fadeIn } from './style'
3
4const FONT = 'font-family="sans-serif"'
5
6// 制御文字を落とす(エンジンは制御文字を含む Text の子や alt を拒み、SVG も壊れる)
7const CONTROL = /[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g
8
9const esc = (s: string) => s.replace(CONTROL, '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
10
11// 1:23 / 1:02:03
12export const clock = (sec: number) => {
13  const h = Math.floor(sec / 3600)
14  const m = Math.floor(sec / 60) % 60
15  const s = String(sec % 60).padStart(2, '0')
16  return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${s}` : `${m}:${s}`
17}
18
19// 長い MCP 名などは頭を残して切る
20export const clean = (s: string) => s.replace(CONTROL, '')
21
22export const short = (raw: string, max = 26) => {
23  const name = clean(raw)
24  return name.length > max ? `${name.slice(0, max - 3)}...` : name
25}
26
27// 経過で帯の色: 120 秒まで青、300 秒まで黄、超えたら赤
28export const flowColor = (sec: number) => (sec > 300 ? C.red : sec > 120 ? C.yellow : C.blue)
29
30type BarArgs = { elapsed: number; tool: string | null; calls: number; lastError: boolean }
31
32// 実行中のバー本体。毎秒描き直すので、点滅は 1 秒周期にして継ぎ目を目立たせない
33export const barSvg = ({ elapsed, tool, calls, lastError }: BarArgs) => {
34  const dot = lastError
35    ? `<circle cx="16" cy="28" r="5" fill="${C.red}"><animate attributeName="opacity" values="1;0.15;1" dur="1s" repeatCount="indefinite"/></circle>`
36    : ''
37  const x = lastError ? 30 : 16
38  const center = tool
39    ? `<text x="300" y="34" text-anchor="middle" font-size="17" fill="${C.blue}" ${FONT}>${esc(short(tool))}</text>`
40    : `<text x="300" y="34" text-anchor="middle" font-size="16" fill="${C.dim}" ${FONT}>考え中</text>`
41  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 56">
42<rect x="0.5" y="0.5" width="599" height="55" rx="8" fill="${C.face}" stroke="${C.line}"/>
43${dot}
44<text x="${x}" y="38" font-size="26" font-weight="bold" fill="${C.text}" ${FONT}>${clock(elapsed)}</text>
45${center}
46<text x="584" y="36" text-anchor="end" fill="${C.dim}" font-size="13" ${FONT}>ツール <tspan font-size="20" font-weight="bold" fill="${C.text}">${calls}</tspan> 回</text>
47</svg>`
48}
49
50// 下端を流れる光の帯。色が変わる時だけ中身が変わるので、アニメは途切れずに流れる
51export const flowSvg = (color: string) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 6">
52<defs><linearGradient id="g"><stop offset="0" stop-color="${color}" stop-opacity="0"/><stop offset="0.5" stop-color="${color}"/><stop offset="1" stop-color="${color}" stop-opacity="0"/></linearGradient>
53<clipPath id="c"><rect x="0" y="1" width="600" height="4" rx="2"/></clipPath></defs>
54<rect x="0" y="1" width="600" height="4" rx="2" fill="${C.line}"/>
55<rect y="1" width="160" height="4" fill="url(#g)" clip-path="url(#c)"><animate attributeName="x" values="-160;600" dur="1.6s" repeatCount="indefinite"/></rect>
56</svg>`
57
58// 前のターンの要約チップ 3 つ。ターンが終わった時だけ変わるので、少しずつずらしてふわっと出す
59export const lastSvg = ({ seconds, calls, errors }: WorkBarLast) => {
60  const chip = (x: number, label: string, value: string, color: string) =>
61    `<rect x="${x}" y="2" width="150" height="26" rx="13" fill="${C.face}" stroke="${C.line}"/>
62<text x="${x + 14}" y="20" font-size="12" fill="${C.dim}" ${FONT}>${label}</text>
63<text x="${x + 136}" y="20" text-anchor="end" font-size="14" font-weight="bold" fill="${color}" ${FONT}>${value}</text>`
64  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 30">
65<text x="0" y="20" font-size="12" fill="${C.dim}" ${FONT}>前のターン</text>
66${fadeIn(chip(80, '所要', clock(seconds), C.text), 0)}
67${fadeIn(chip(240, 'ツール', `${calls} 回`, C.text), 0.08)}
68${fadeIn(chip(400, 'エラー', `${errors} 件`, errors > 0 ? C.red : C.green), 0.16)}
69</svg>`
70}
71
72// "表示名=送る文|..." を読む。= が無ければ表示名と送る文を同じにする
73export const parsePresets = (raw: string) =>
74  raw
75    .split('|')
76    .map(part => {
77      const i = part.indexOf('=')
78      const label = (i < 0 ? part : part.slice(0, i)).trim()
79      const text = (i < 0 ? part : part.slice(i + 1)).trim()
80      return { label: label || text, text }
81    })
82    .filter(p => p.text !== '')
83

1// 実行中のターン(メインループのみ)。待機中は null
2export type WorkBarRun = {
3  startedAt: number
4  elapsed: number // 秒
5  calls: number
6  errors: number
7  active: string[] // 今動いているツール(並列ぶん)
8  lastError: boolean
9}
10
11// 前のターンの要約
12export type WorkBarLast = { seconds: number; calls: number; errors: number }
13
14declare module 'claude-code' {
15  interface PluginState {
16    'work-bar': {
17      run: WorkBarRun | null
18      last: WorkBarLast | null
19      isHidden: boolean
20      pick: string // Select 表示のときに選んでいる定型の番号
21    }
22  }
23}
24