agent-watch

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { ListedAgent } from './watch'
5import { followTheme, readTheme } from './style'
6import {
7  applyList,
8  clean,
9  countsOf,
10  cut,
11  dur,
12  elapsedOf,
13  kindOf,
14  onTurnComplete,
15  onTurnStart,
16  paneSvg,
17  shownOf,
18  STATUS_WORD,
19  titleOf,
20  touch,
21} from './watch'
22
23const PANE = 'agent-watch'
24const TITLE = 'サブエージェント'
25const DESCRIPTION = 'サブエージェントの動きを見るペインを開く'
26/** ペインが開いている間、一覧を読む間隔 */
27const POLL_MS = 2000
28/** Agent 以外のツール。フックは自分の下で入れ子になった同じフックには呼ばれないので、Agent を包むフックは分けておく */
29const NOT_AGENT = /^(?!Agent$)/
30
31const AGENTS = atom({ plugin: 'agent-watch', key: 'agents' } as const, {})
32const NOW = atom({ plugin: 'agent-watch', key: 'now' } as const, 0)
33const HIDE = atom({ plugin: 'agent-watch', key: 'hideDone' } as const, false)
34const NOTE = atom({ plugin: 'agent-watch', key: 'note' } as const, '')
35
36type $ = EngineInterface
37
38let ownsMain = false
39
40/** 一覧を読んで $.state に置く。描画フックの外 (タイマー・コマンド・新しいエージェントの始まり) で呼ぶ */
41async function refresh($: $) {
42  const listed = (await $.agent.list().catch(() => undefined)) as readonly ListedAgent[] | undefined
43  if (!listed) return
44  const now = await $.clock.now()
45  const before = await read($, AGENTS)
46  if (applyList(before, listed, now) !== before) await update($, AGENTS, a => applyList(a, listed, now))
47  // 動いている物がある間だけ時刻を書き、経過時間を描き直させる
48  const after = await read($, AGENTS)
49  if (Object.values(after).some(r => r.isListed && r.endedAt === undefined)) await update($, NOW, () => now)
50}
51
52/** ボタンから見る会話を切り替える。拒まれたら理由を出す */
53async function view($: $, arg: { agentId?: string }) {
54  const r = await $.ui.view(arg).catch((err: unknown) => ({ deny: err instanceof Error ? err.message : String(err) }))
55  await update($, NOTE, () => (r.deny ? `切り替えられませんでした: ${cut(clean(r.deny), 200)}` : ''))
56}
57
58const openPane = async ($: $) => {
59  await refresh($)
60  await $.ui.open({ id: PANE, title: TITLE })
61  return { text: 'サブエージェントのペインを開きました。' }
62}
63
64export const register: Register = on => {
65  followTheme(on)
66  on('session.start', async ($, e, next) => {
67    await readTheme($)
68    const started = await next(e)
69    // /agents は組み込みと被りやすい。拒まれたら /agent-watch にする
70    const got = await $.command.register({ name: 'agents', description: DESCRIPTION }).catch(() => undefined)
71    ownsMain = got?.command === 'agents'
72    if (!ownsMain) await $.command.register({ name: 'agent-watch', description: DESCRIPTION }).catch(() => {})
73    $.clock.every(POLL_MS, async () => {
74      const panes = await $.ui.panes().catch(() => [])
75      if (panes.some(p => p.id === PANE)) await refresh($)
76    })
77    return started
78  })
79
80  // /clear で記録を消す
81  on('session.end', async ($, e, next) => {
82    if (e.reason === 'clear') {
83      await update($, AGENTS, () => ({}))
84      await update($, NOTE, () => '')
85    }
86    return next(e)
87  })
88
89  // /agents を持てなかった時は、元の /agents (組み込み) に回す
90  on('command.run', { command: 'agents' }, ($, e, next) => (ownsMain ? openPane($) : next(e))).catch(($, e, next) => next(e))
91  // /agents を持てた時は /agent-watch を登録していないので、その名前の持ち主に回す
92  on('command.run', { command: 'agent-watch' }, ($, e, next) => (ownsMain ? next(e) : openPane($))).catch(($, e, next) => next(e))
93
94  // サブエージェントのターンの始まり。初めて見る物は一覧から種類と説明を読む
95  on('turn.start', async ($, e, next) => {
96    const id = e.agentId
97    if (id !== undefined) {
98      const now = await $.clock.now()
99      const isNew = !(await read($, AGENTS))[id]?.isListed
100      await update($, AGENTS, a => onTurnStart(a, id, now))
101      if (isNew) await refresh($)
102    }
103    return next(e)
104  }).catch(($, e, next) => next(e))
105
106  on('turn.complete', async ($, e, next) => {
107    const id = e.agentId
108    if (id !== undefined) {
109      const now = await $.clock.now()
110      await update($, AGENTS, a => onTurnComplete(a, id, now, e.durationMs, e.reason))
111    }
112    return next(e)
113  }).catch(($, e, next) => next(e))
114
115  // サブエージェントのツール。見るだけ。中断 (next が投げる) と deny はエラーに数えない
116  on('tool.call', { tool: NOT_AGENT }, async ($, e, next) => {
117    const id = e.agentId
118    if (id === undefined) return next(e)
119    const tool = cut(clean(String(e.tool)), 60)
120    const now = await $.clock.now()
121    await update($, AGENTS, a => touch(a, id, now, r => ({ ...r, tools: r.tools + 1, lastTool: tool })))
122    let isError = false
123    try {
124      const r = await next(e)
125      isError = r.isError === true
126      return r
127    } finally {
128      if (isError) await update($, AGENTS, a => touch(a, id, now, r => ({ ...r, errors: r.errors + 1 })))
129    }
130  }).catch(($, e, next) => next(e))
131
132  // Agent の呼び出しは別のフックで数える。上のフックが Agent を包むと、その下で動くエージェントのツールを上のフックが聞けなくなる
133  on('tool.call', { tool: 'Agent' }, async ($, e, next) => {
134    const id = e.agentId
135    if (id !== undefined) {
136      const now = await $.clock.now()
137      await update($, AGENTS, a => touch(a, id, now, r => ({ ...r, tools: r.tools + 1, lastTool: 'Agent' })))
138    }
139    return next(e)
140  }).catch(($, e, next) => next(e))
141
142  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
143    const t = $.ui.resolve(e)
144    const { Box, Text, Button } = t
145    // terminal の表にも Svg の名前があるので、画面の種類でも分ける
146    const Svg = e.surface !== 'terminal' && 'Svg' in t ? t.Svg : undefined
147    const agents = await read($, AGENTS)
148    const hideDone = await read($, HIDE)
149    const note = await read($, NOTE)
150    await read($, NOW) // 2 秒ごとの描き直しを受ける
151    const now = await $.clock.now()
152    const { all, shown } = shownOf(agents, hideDone)
153    const counts = countsOf(all)
154    const hidden = all.length - shown.length
155    const viewingId = e.props.view?.agentId
156    const viewing = viewingId === undefined ? undefined : agents[viewingId]
157    const summary = `動いている ${counts.live} / 終わった ${counts.done} / エラー ${counts.failed}`
158    const empty = hidden > 0 ? `終わった物を隠しています (${hidden} 体)` : 'サブエージェントはまだいません'
159
160    return (
161      <Box flexDirection="column" gap={1}>
162        <Box key="top" flexDirection="column">
163          <Button key="main" label="メインに戻る" variant={viewingId !== undefined ? 'primary' : 'secondary'} dimColor={viewingId === undefined} onPress={() => view($, {})} />
164          <Button key="hide" dimColor label={hideDone ? '終わった物も出す' : '終わった物を隠す'} onPress={() => update($, HIDE, v => !v)} />
165        </Box>
166        {Svg ? (
167          <Svg
168            source={paneSvg({ shown, counts, hidden, now, viewing: viewing ? titleOf(viewing) : viewingId === undefined ? undefined : '(一覧に無い物)' })}
169            alt={summary}
170          />
171        ) : (
172          <Box key="lines" flexDirection="column">
173            <Text bold>{summary}</Text>
174            {shown.length === 0 && <Text dimColor>{empty}</Text>}
175            {shown.map(r => {
176              const kind = kindOf(r.status)
177              const color = kind === 'run' ? 'blue' : kind === 'wait' ? 'yellow' : kind === 'done' ? 'green' : kind === 'fail' ? 'red' : undefined
178              return (
179                <Box key={`row-${r.id}`} flexDirection="column">
180                  <Text color={color}>{`${kind === 'run' ? '●' : '○'} ${cut(titleOf(r), 18)} ${STATUS_WORD[kind]} ${dur(elapsedOf(r, now))} ツール ${r.tools}`}</Text>
181                  <Text dimColor>{`  ${cut(r.description || '(説明なし)', 24)} / 最後 ${cut(r.lastTool || 'なし', 16)} / エラー ${r.errors}`}</Text>
182                </Box>
183              )
184            })}
185          </Box>
186        )}
187        {shown.length > 0 && (
188          <Box key="views" flexDirection="column">
189            {shown.map(r => (
190              <Button
191                key={`view-${r.id}`} dimColor={r.id !== viewingId}
192                label={`${r.id === viewingId ? '表示中' : '会話を見る'}: ${cut(titleOf(r), 16)} ${cut(r.description, 12)}`.trim()}
193                onPress={() => view($, { agentId: r.id })}
194              />
195            ))}
196          </Box>
197        )}
198        {note !== '' && <Text dimColor>{note}</Text>}
199      </Box>
200    )
201  })
202}
203

1// 記録を合わせる純関数と、ペインの SVG。描画面は <img> なので SMIL だけで動かす
2import type { AgentWatchRecord, AgentWatchStatus } from '../types'
3import { C, HEADER_H, W, clean, esc, frame, header } from './style'
4
5/** $.agent.list() の 1 件のうち使う所 */
6export type ListedAgent = { id: string; type: string; description: string; status: AgentWatchStatus }
7export type Agents = Record<string, AgentWatchRecord>
8
9/** 持っておく記録の数。超えたら終わった物の古い方から捨てる */
10export const KEEP = 30
11
12// clean (制御文字を落とす) と esc は style.ts の物。register が ./watch から読むので出し直す
13export { clean, esc }
14
15export const cut = (s: string, n: number) => (s.length > n ? `${s.slice(0, n - 2)}..` : s)
16
17/** 描き直しでアニメが頭に戻って跳ねないよう、時刻から位相を決める (begin を負に) */
18const phase = (now: number, periodMs: number) => `-${((now % periodMs) / 1000).toFixed(2)}s`
19
20/** 経過 m:ss / h:mm:ss */
21export const dur = (ms: number) => {
22  const s = Math.max(0, Math.floor(ms / 1000))
23  const pad = (n: number) => String(n).padStart(2, '0')
24  const h = Math.floor(s / 3600)
25  const m = Math.floor(s / 60) % 60
26  return h > 0 ? `${h}:${pad(m)}:${pad(s % 60)}` : `${m}:${pad(s % 60)}`
27}
28
29// ---- 記録 ----
30
31export type Kind = 'run' | 'wait' | 'done' | 'fail' | 'stop'
32
33export const kindOf = (status: AgentWatchStatus): Kind =>
34  status === 'running' || status === 'pending'
35    ? 'run'
36    : status === 'waiting' || status === 'idle'
37      ? 'wait'
38      : status === 'completed'
39        ? 'done'
40        : status === 'failed'
41          ? 'fail'
42          : 'stop'
43
44export const isEnded = (status: AgentWatchStatus) => status === 'completed' || status === 'failed' || status === 'killed'
45
46const STATUSES: readonly AgentWatchStatus[] = ['pending', 'running', 'waiting', 'idle', 'completed', 'failed', 'killed']
47
48const fresh = (id: string, now: number): AgentWatchRecord => ({
49  id,
50  type: '',
51  description: '',
52  status: 'running',
53  isListed: false,
54  startedAt: now,
55  durationMs: 0,
56  tools: 0,
57  lastTool: '',
58  errors: 0,
59})
60
61/** 多すぎたら、終わった物の古い方から捨てる */
62const prune = (agents: Agents): Agents => {
63  const list = Object.values(agents)
64  if (list.length <= KEEP) return agents
65  const drop = new Set(
66    list
67      .filter(r => r.endedAt !== undefined)
68      .sort((a, b) => a.startedAt - b.startedAt)
69      .slice(0, list.length - KEEP)
70      .map(r => r.id),
71  )
72  return Object.fromEntries(Object.entries(agents).filter(([id]) => !drop.has(id)))
73}
74
75/** id の記録を change で変える。無ければ今の時刻で作る */
76export const touch = (agents: Agents, id: string, now: number, change: (r: AgentWatchRecord) => AgentWatchRecord): Agents => {
77  const r = agents[id] ?? fresh(id, now)
78  return prune({ ...agents, [id]: change({ ...r, startedAt: Math.min(r.startedAt, now) }) })
79}
80
81/** ターンの始まり: 終わっていた物も、もう一度動き出したとみなす */
82export const onTurnStart = (agents: Agents, id: string, now: number) =>
83  touch(agents, id, now, r => {
84    const { endedAt: _, ...rest } = r
85    return { ...rest, status: 'running' }
86  })
87
88/** ターンの終わり。答えて終わった物だけを「終わり」、中断は止めた、エラー・拒否は失敗にする (C5) */
89export const onTurnComplete = (agents: Agents, id: string, now: number, durationMs: number, reason: string) =>
90  touch(agents, id, now - Math.max(0, durationMs), r => ({
91    ...r,
92    endedAt: now,
93    durationMs: r.durationMs + Math.max(0, durationMs),
94    status: reason === 'answer' ? 'completed' : reason === 'aborted' ? 'killed' : 'failed',
95  }))
96
97/** $.agent.list() の結果を合わせる。変わらなければ同じ物を返す */
98export const applyList = (agents: Agents, listed: readonly ListedAgent[], now: number): Agents => {
99  let next = agents
100  const ids = new Set<string>()
101  for (const a of listed) {
102    if (typeof a?.id !== 'string' || a.id === '') continue
103    ids.add(a.id)
104    const prev = next[a.id] ?? fresh(a.id, now)
105    const listedStatus: AgentWatchStatus = STATUSES.includes(a.status) ? a.status : prev.status
106    // 終わりを聞いた後の「実行中」は、一覧がまだ追いついていないだけなので採らない (動き出したら turn.start で戻る)
107    const status = prev.endedAt !== undefined && kindOf(listedStatus) === 'run' ? prev.status : listedStatus
108    const r: AgentWatchRecord = {
109      ...prev,
110      type: clean(String(a.type ?? '')),
111      description: clean(String(a.description ?? '')),
112      status,
113      isListed: true,
114      ...(isEnded(status) && prev.endedAt === undefined ? { endedAt: now } : {}),
115    }
116    if (JSON.stringify(r) !== JSON.stringify(next[a.id])) next = { ...next, [a.id]: r }
117  }
118  // ponytail: 一覧から消えた動いている物は、終わったとみなす (エンジンは終わった task を後で一覧から落とす)
119  for (const r of Object.values(next)) {
120    if (r.isListed && !ids.has(r.id) && r.endedAt === undefined) {
121      next = { ...next, [r.id]: { ...r, status: isEnded(r.status) ? r.status : 'completed', endedAt: now } }
122    }
123  }
124  return next === agents ? agents : prune(next)
125}
126
127export type Counts = { live: number; done: number; failed: number; tools: number; errors: number }
128
129export const countsOf = (list: readonly AgentWatchRecord[]): Counts => ({
130  live: list.filter(r => r.endedAt === undefined || !isEnded(r.status)).length,
131  done: list.filter(r => r.status === 'completed' || r.status === 'killed').length,
132  failed: list.filter(r => r.status === 'failed').length,
133  tools: list.reduce((n, r) => n + r.tools, 0),
134  errors: list.reduce((n, r) => n + r.errors, 0),
135})
136
137/** 描く順に並べる (一覧が名前を言った物だけ、新しい順)。hideDone なら終わった物を外す */
138export const shownOf = (agents: Agents, hideDone: boolean) => {
139  const listed = Object.values(agents).filter(r => r.isListed)
140  return {
141    all: listed,
142    shown: listed.filter(r => !hideDone || !isEnded(r.status)).sort((a, b) => b.startedAt - a.startedAt),
143  }
144}
145
146/** 右に出す経過時間: 動いていれば今まで、終わっていればターンの合計 (無ければ始まりから終わりまで) */
147export const elapsedOf = (r: AgentWatchRecord, now: number) =>
148  r.endedAt === undefined ? now - r.startedAt : r.durationMs > 0 ? r.durationMs : r.endedAt - r.startedAt
149
150export const STATUS_WORD: Record<Kind, string> = { run: '実行中', wait: '待ち', done: '終わり', fail: '失敗', stop: '止めた' }
151/** 状態の色。テーマに付いていくよう読むたびに C から引く */
152export const KIND_COLOR: Record<Kind, string> = {
153  get run() { return C.blue },
154  get wait() { return C.yellow },
155  get done() { return C.green },
156  get fail() { return C.red },
157  get stop() { return C.dim },
158}
159
160/** 名前の行に出す見出し。種類が無ければ (不明) */
161export const titleOf = (r: AgentWatchRecord) => r.type || '(種類不明)'
162
163// ---- SVG ----
164
165// ペインは一覧を読むたび・ツールを呼ぶたびに描き直すので、流れる縞と点滅のほかに動きは足さない (mod-guide 2 節)
166const X0 = 16
167const BW = W - 32
168/** 見出しの下から中身を始める y */
169const TOP = HEADER_H + 12
170
171const text = (x: number, y: number, s: string, size: number, fill: string, extra = '') =>
172  `<text x="${x}" y="${y}" font-size="${size}" fill="${fill}" ${extra}>${esc(s)}</text>`
173
174export type PaneView = {
175  shown: readonly AgentWatchRecord[]
176  counts: Counts
177  /** 隠している数 */
178  hidden: number
179  now: number
180  /** 見ているエージェントの見出し。メインなら無し */
181  viewing?: string
182}
183
184const tiles = (c: Counts, now: number) => {
185  const tw = (BW - 20) / 3
186  const tile = (i: number, label: string, n: number, edge: string, isHot: boolean) => {
187    const x = X0 + i * (tw + 10)
188    const y = TOP
189    const pulse =
190      isHot && i === 0
191        ? `<circle cx="${x + tw - 14}" cy="${y + 18}" r="4" fill="${edge}">` +
192          `<animate attributeName="opacity" values="1;0.2;1" dur="1.2s" begin="${phase(now, 1200)}" repeatCount="indefinite"/></circle>`
193        : ''
194    return (
195      `<rect x="${x}" y="${y}" width="${tw}" height="64" rx="8" fill="${C.face}" stroke="${edge}" stroke-width="1.5"/>` +
196      `<rect x="${x + 10}" y="${y}" width="${tw - 20}" height="3" fill="${edge}"/>` +
197      pulse +
198      text(x + 10, y + 22, label, 12, C.dim) +
199      text(x + 10, y + 52, String(n), 26, isHot ? edge : C.text, 'font-weight="bold"')
200    )
201  }
202  return tile(0, '動いている', c.live, C.blue, c.live > 0) + tile(1, '終わった', c.done, C.green, c.done > 0) + tile(2, 'エラー', c.failed, C.red, c.failed > 0)
203}
204
205/** 帯 1 本。実行中は太い破線の dashoffset を流して縞にする。位相を時刻から決め、描き直しで縞が跳ねないようにする */
206const band = (x: number, y: number, w: number, kind: Kind, now: number) => {
207  const color = KIND_COLOR[kind]
208  if (kind === 'run') {
209    return (
210      `<rect x="${x}" y="${y}" width="${w}" height="10" rx="3" fill="${color}" opacity="0.35"/>` +
211      `<line x1="${x}" y1="${y + 5}" x2="${x + w}" y2="${y + 5}" stroke="${color}" stroke-width="10" stroke-dasharray="6 6">` +
212      `<animate attributeName="stroke-dashoffset" from="12" to="0" dur="0.6s" begin="${phase(now, 600)}" repeatCount="indefinite"/></line>`
213    )
214  }
215  const blink = kind === 'wait' ? `<animate attributeName="opacity" values="1;0.45;1" dur="1.6s" begin="${phase(now, 1600)}" repeatCount="indefinite"/>` : ''
216  return `<rect x="${x}" y="${y}" width="${w}" height="10" rx="3" fill="${color}">${blink}</rect>`
217}
218
219const ROW = 74
220
221export const paneSvg = (v: PaneView) => {
222  const head =
223    header('サブエージェント', v.viewing ? `表示中: ${cut(v.viewing, 20)}` : '表示中: メイン', v.viewing ? C.purple : C.blue) +
224    tiles(v.counts, v.now) +
225    text(X0, TOP + 84, `ツールの呼び出し 計 ${v.counts.tools}  /  ツールのエラー 計 ${v.counts.errors}`, 12, C.dim)
226
227  const rows = v.shown.slice(0, KEEP)
228  if (rows.length === 0) {
229    const empty = v.hidden > 0 ? `終わった物を隠しています (${v.hidden} 体)` : 'サブエージェントはまだいません'
230    return frame(TOP + 152, head + text(W / 2, TOP + 126, empty, 13, C.dim, 'text-anchor="middle"'))
231  }
232
233  const t0 = Math.min(...rows.map(r => r.startedAt))
234  const isLive = rows.some(r => r.endedAt === undefined)
235  const t1 = isLive ? v.now : Math.max(...rows.map(r => r.endedAt ?? v.now))
236  const span = Math.max(1000, t1 - t0)
237  const xOf = (t: number) => X0 + (Math.min(Math.max(t, t0), t1) - t0) / span * BW
238
239  const body = rows
240    .map((r, i) => {
241      const y = TOP + 102 + i * ROW
242      const kind = kindOf(r.status)
243      const color = KIND_COLOR[kind]
244      const x = xOf(r.startedAt)
245      const w = Math.max(4, xOf(r.endedAt ?? v.now) - x)
246      return (
247        text(X0, y + 14, cut(titleOf(r), 18), 13, color, 'font-weight="bold"') +
248        text(W - 16, y + 14, `${dur(elapsedOf(r, v.now))}  ツール ${r.tools}`, 12, C.text, 'text-anchor="end"') +
249        text(X0, y + 31, cut(r.description || '(説明なし)', 27), 12, C.dim) +
250        `<rect x="${X0}" y="${y + 39}" width="${BW}" height="10" rx="3" fill="${C.face}"/>` +
251        band(x, y + 39, w, kind, v.now) +
252        `<text x="${X0}" y="${y + 64}" font-size="12" fill="${C.dim}"><tspan fill="${color}">${STATUS_WORD[kind]}</tspan>` +
253        `  最後 ${esc(cut(r.lastTool || 'なし', 16))}  ` +
254        `<tspan fill="${r.errors > 0 ? C.red : C.dim}">エラー ${r.errors}</tspan></text>`
255      )
256    })
257    .join('')
258
259  const axisY = TOP + 102 + rows.length * ROW + 4
260  const axis =
261    `<line x1="${X0}" y1="${axisY}" x2="${X0 + BW}" y2="${axisY}" stroke="${C.line}"/>` +
262    text(X0, axisY + 18, '始まり', 12, C.dim) +
263    text(W / 2, axisY + 18, `全体 ${dur(span)}`, 12, C.dim, 'text-anchor="middle"') +
264    text(W - 16, axisY + 18, isLive ? '今' : '最後', 12, C.dim, 'text-anchor="end"') +
265    (v.hidden > 0 ? text(X0, axisY + 38, `終わった物を ${v.hidden} 体隠しています`, 12, C.dim) : '')
266
267  return frame(axisY + (v.hidden > 0 ? 50 : 30), head + body + axis)
268}
269

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/** $.agent.list() の status と同じ言葉 */
2export type AgentWatchStatus = 'pending' | 'running' | 'waiting' | 'idle' | 'completed' | 'failed' | 'killed'
3
4/** 1 体分の記録。$.agent.list() とイベント (tool.call / turn.start / turn.complete) を合わせた物 */
5export type AgentWatchRecord = {
6  id: string
7  /** 種類 (general-purpose, Explore ...)。制御文字は落としてある。一覧が名前を言うまでは空 */
8  type: string
9  /** Agent 呼び出しの description。制御文字は落としてある */
10  description: string
11  status: AgentWatchStatus
12  /** $.agent.list() に一度でも出たか。出ない物 (エンジンの内部の fork など) は描かない */
13  isListed: boolean
14  /** 最初に見た時刻 (ms) */
15  startedAt: number
16  /** 終わった時刻 (ms)。動いている間は無し */
17  endedAt?: number
18  /** turn.complete の durationMs の合計 */
19  durationMs: number
20  tools: number
21  /** 最後に呼んだツール。まだ無ければ空 */
22  lastTool: string
23  /** ツールがエラーを返した回数 (deny と中断は数えない) */
24  errors: number
25}
26
27declare module 'claude-code' {
28  interface PluginState {
29    'agent-watch': {
30      /** id ごとの記録 */
31      agents: Record<string, AgentWatchRecord>
32      /** 経過時間を描き直すための時刻。ペインが開いていて動いている物がある間、2 秒ごとに書く */
33      now: number
34      /** 終わった物を隠すか */
35      hideDone: boolean
36      /** ボタンの結果の一言。空なら出さない */
37      note: string
38    }
39  }
40}
41