session-recap

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, ModelForkResult, Register } from 'claude-code'
3
4import type { RecapSummary, RecapTurn } from '../types'
5import { busySvg, clock, dur, head, hm, timelineSvg, totalsSvg } from './svg'
6import { followTheme, readTheme } from './style'
7
8const PANE = 'session-recap'
9const TITLE = 'ふりかえり'
10const KEEP_TURNS = 100
11/** コマンドを見てからこの間にターンが始まらなければ、そのコマンドはターンを起こさなかったと見る */
12const PENDING_MS = 30_000
13
14const turnsA = atom({ plugin: 'session-recap', key: 'turns' } as const, [] as RecapTurn[])
15const startedA = atom({ plugin: 'session-recap', key: 'startedAt' } as const, 0)
16const pendingA = atom({ plugin: 'session-recap', key: 'pending' } as const, null as { name: string; args: string; at: number } | null)
17const selectedA = atom({ plugin: 'session-recap', key: 'selected' } as const, null as string | null)
18const IDLE: RecapSummary = { status: 'idle', text: '', scope: '', at: 0 }
19const summaryA = atom({ plugin: 'session-recap', key: 'summary' } as const, IDLE)
20const noticeA = atom({ plugin: 'session-recap', key: 'notice' } as const, '')
21const commandA = atom({ plugin: 'session-recap', key: 'command' } as const, '')
22
23type $ = EngineInterface
24
25/** 走っている (end の無い) 最後のターンに fn をかける */
26const onOpenTurn = (list: RecapTurn[], fn: (t: RecapTurn) => RecapTurn) => {
27  const i = list.findLastIndex(t => t.end === undefined)
28  return i < 0 ? list : list.map((t, j) => (j === i ? fn(t) : t))
29}
30
31const ASK = [
32  'ここまでのこのセッションをふりかえってください。',
33  '日本語で、次の 3 つの見出しの下に、それぞれ箇条書きを 3 つずつ書いてください。',
34  '## やったこと',
35  '## 決めたこと',
36  '## 残っていること',
37  'ツールは使わず、この返答の文だけで答えてください。',
38].join('\n')
39
40const askFor = (upTo?: RecapTurn) =>
41  upTo
42    ? `${ASK}\n対象は ${hm(upTo.start)} に始まったターン(依頼:「${head(upTo.prompt, 100)}」)までです。それより後のやり取りは無いものとして扱ってください。`
43    : ASK
44
45const whyNot = (r: ModelForkResult): string => {
46  if (r.isAnswered) return ''
47  switch (r.reason) {
48    case 'nothing-to-fork':
49      return 'まだ要約できるやり取りがありません(最初の返答の前か /clear の直後です)'
50    case 'api-error':
51      return `API のエラーで要約できませんでした(${r.status ?? '応答なし'} ${r.error})`
52    case 'empty-reply':
53      return '返答に文がありませんでした'
54    case 'aborted':
55      return '要約が中断されました'
56  }
57}
58
59const summarize = async ($: $, upTo?: RecapTurn) => {
60  const at = await $.clock.now()
61  const scope = upTo ? `${hm(upTo.start)} のターンまで` : 'ここまで'
62  // 二度押し: running を自分で取れた時だけ fork する (update は衝突でやり直すので旗は毎回決め直す)
63  let isMine = false
64  await update($, summaryA, (s): RecapSummary => {
65    isMine = s.status !== 'running'
66    return isMine ? { status: 'running', text: '', scope, at } : s
67  })
68  if (!isMine) return
69  await update($, noticeA, () => '')
70  let r: ModelForkResult
71  try {
72    r = await $.model.fork({ prompt: askFor(upTo) })
73  } catch (err) {
74    await update($, summaryA, () => ({ status: 'failed', text: `要約を頼めませんでした(${err instanceof Error ? err.message : String(err)})`, scope, at }))
75    return
76  }
77  await update($, summaryA, () => (r.isAnswered ? { status: 'done', text: r.text, scope, at } : { status: 'failed', text: whyNot(r), scope, at }))
78}
79
80const fillPrompt = async ($: $) => {
81  const s = await read($, summaryA)
82  if (s.status !== 'done') return
83  const r = await $.prompt.fill({ text: `${s.text}\n`, mode: 'insert' })
84  const why = r.refusal === 'dialog' ? '(ダイアログが開いています)' : r.refusal === 'no_composer' ? '(入力欄がありません)' : ''
85  await update($, noticeA, () => (r.isFilled ? '入力欄に入れました(送信はしていません)' : `入力欄に入れられませんでした${why}`))
86}
87
88const openPane = async ($: $) => {
89  await $.ui.open({ id: PANE, title: TITLE })
90  return { text: 'ふりかえりを開きました。' }
91}
92
93export const register: Register = on => {
94  followTheme(on)
95
96  on('session.start', async ($, e, next) => {
97    await readTheme($)
98    // /recap は組み込み (2.1.300 で確認) と被って拒まれる。取れなければ /session-recap にする
99    const description = 'セッションのふりかえりをペインに表示'
100    const got = await $.command.register({ name: 'recap', description }).catch(() => undefined)
101    if (got?.command === 'recap') {
102      await update($, commandA, () => 'recap')
103    } else {
104      await $.command.register({ name: 'session-recap', description }).catch(() => {})
105      await update($, commandA, () => 'session-recap')
106    }
107    const now = await $.clock.now()
108    await update($, startedA, v => v || now)
109    // 要約の途中でリロードすると答えを受け取る先が無くなるので、running のまま残さない
110    await update($, summaryA, (s): RecapSummary => (s.status === 'running' ? { ...s, status: 'failed', text: '途中で止まりました' } : s))
111    // 経過の分と実行中の帯が動くので 1 分ごとに描き直す
112    $.clock.every(60_000, () => $.ui.invalidate('ui.render'))
113    return next(e)
114  })
115
116  on('session.end', async ($, e, next) => {
117    if (e.reason === 'clear') {
118      const now = await $.clock.now()
119      await update($, startedA, () => now)
120      await update($, turnsA, () => [])
121      await update($, pendingA, () => null)
122      await update($, selectedA, () => null)
123      await update($, summaryA, () => IDLE)
124      await update($, noticeA, () => '')
125    }
126    return next(e)
127  })
128
129  // 組み込みの /recap を横取りしない: 自分で登録できた時だけ答える
130  on('command.run', { command: 'recap' }, async ($, e, next) => ((await read($, commandA)) === 'recap' ? openPane($) : next(e))).catch(
131    ($, e, next) => next(e),
132  )
133  on('command.run', { command: 'session-recap' }, async $ => openPane($))
134
135  // スラッシュコマンドだけ覚えておく (turn.start の text は展開後の本文になるため)
136  on('prompt.submit', async ($, e, next) => {
137    if (e.command && e.turnId === undefined) {
138      const { name, args } = e.command
139      const at = await $.clock.now()
140      await update($, pendingA, () => ({ name, args, at }))
141    } else if (!e.command && e.turnId === undefined) {
142      // 普通の依頼: 前に見たコマンドがターンを起こさなかったなら、ここで忘れる
143      await update($, pendingA, () => null)
144    }
145    return next(e)
146  }).catch(($, e, next) => next(e))
147
148  on('turn.start', async ($, e, next) => {
149    if (e.agentId !== undefined) return next(e)
150    const now = await $.clock.now()
151    const p = await read($, pendingA)
152    await update($, pendingA, () => null)
153    const cmd = p && now - p.at <= PENDING_MS ? p : null
154    const prompt = cmd ? `/${cmd.name}${cmd.args ? ` ${cmd.args}` : ''}` : e.text
155    const turn: RecapTurn = {
156      turnId: e.turnId,
157      start: now,
158      label: cmd ? `/${cmd.name}` : head(e.text, 60) || '(続き)',
159      prompt: head(prompt, 300),
160      tools: {},
161      errors: 0,
162    }
163    // 前のターンが閉じずに残っていたら、ここで閉じる
164    await update($, turnsA, list => [...onOpenTurn(list, t => ({ ...t, end: now })), turn].slice(-KEEP_TURNS))
165    return next(e)
166  })
167
168  // 見るだけ。落ちても呼び出しは止めない
169  on('tool.call', async ($, e, next) => {
170    if (e.agentId !== undefined) return next(e)
171    const tool = String(e.tool)
172    let isError = true
173    try {
174      const r = await next(e)
175      isError = r.deny !== undefined || r.isError === true
176      return r
177    } finally {
178      await update($, turnsA, list =>
179        onOpenTurn(list, t => ({ ...t, tools: { ...t.tools, [tool]: (t.tools[tool] ?? 0) + 1 }, errors: t.errors + (isError ? 1 : 0) })),
180      )
181    }
182  }).catch(($, e, next) => next(e))
183
184  on('turn.complete', async ($, e, next) => {
185    if (e.agentId !== undefined) return next(e)
186    const now = await $.clock.now()
187    await update($, turnsA, list => {
188      if (list.some(t => t.turnId === e.turnId)) {
189        return list.map(t => (t.turnId === e.turnId ? { ...t, end: t.start + e.durationMs, reason: e.reason } : t))
190      }
191      // 始まりを聞いていないターン (読み込み前に始まった等)
192      const t: RecapTurn = { turnId: e.turnId, start: now - e.durationMs, end: now, label: '(始まりを見ていないターン)', prompt: '', tools: {}, errors: 0, reason: e.reason }
193      return [...list, t].slice(-KEEP_TURNS)
194    })
195    return next(e)
196  })
197
198  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
199    const t = $.ui.resolve(e)
200    const { Box, Text, Button, Markdown } = t
201    const Svg = e.surface === 'terminal' || !('Svg' in t) ? undefined : t.Svg
202    const now = await $.clock.now()
203    const turns = await read($, turnsA)
204    const selected = await read($, selectedA)
205    const summary = await read($, summaryA)
206    const notice = await read($, noticeA)
207    const startedAt = (await read($, startedA)) || turns[0]?.start || now
208
209    const done = turns.filter(x => x.end !== undefined)
210    const longest = done.reduce<RecapTurn | undefined>((a, x) => (!a || x.end! - x.start > a.end! - a.start ? x : a), undefined)
211    const totals = {
212      elapsedMs: now - startedAt,
213      turns: turns.length,
214      tools: turns.reduce((n, x) => n + Object.values(x.tools).reduce((a, b) => a + b, 0), 0),
215      errors: turns.reduce((n, x) => n + x.errors, 0),
216      longest,
217      isRunning: turns.some(x => x.end === undefined),
218    }
219    const totalsAlt = `経過 ${clock(totals.elapsedMs)} ターン ${totals.turns} ツール ${totals.tools} エラー ${totals.errors}`
220
221    const lenOf = (x: RecapTurn) => (x.end === undefined ? '実行中' : dur(x.end - x.start))
222    const toolsOf = (x: RecapTurn) =>
223      Object.entries(x.tools)
224        .sort((a, b) => b[1] - a[1])
225        .map(([k, n]) => `${k.startsWith('mcp__') ? k.split('__').pop() : k} ${n}`)
226        .join('、') || 'なし'
227
228    const sel = turns.find(x => x.turnId === selected)
229    const detail = sel && (
230      <Box key="detail" flexDirection="column" borderStyle="round" paddingX={1}>
231        <Text key="detail-head" bold>{`${hm(sel.start)} から ${lenOf(sel)}`}</Text>
232        <Text key="detail-prompt">{sel.prompt || '(依頼の文なし)'}</Text>
233        <Text key="detail-tools" dimColor>{`ツール: ${toolsOf(sel)}`}</Text>
234        {sel.errors > 0 || sel.reason === 'error' ? (
235          <Text key="detail-errors" color="red">{`エラー ${sel.errors} 回${sel.reason === 'error' ? '(ターンもエラーで終了)' : ''}`}</Text>
236        ) : null}
237        <Box key="detail-actions" flexDirection="row" gap={1}>
238          <Button key="summarize-upto" label="この時点までを要約" onPress={() => summarize($, sel)} />
239          <Button key="detail-close" dimColor label="閉じる" onPress={() => update($, selectedA, () => null)} />
240        </Box>
241      </Box>
242    )
243
244    const summaryView =
245      summary.status === 'running' ? (
246        Svg ? (
247          <Svg key="busy" source={busySvg()} alt="要約中…" />
248        ) : (
249          <Text key="busy" color="blue">要約中…</Text>
250        )
251      ) : summary.status === 'failed' ? (
252        <Text key="summary-error" color="red">{`要約できませんでした: ${summary.text}`}</Text>
253      ) : summary.status === 'done' ? (
254        <Box key="summary" flexDirection="column">
255          <Text key="summary-scope" dimColor>{`${hm(summary.at)} に作った要約(${summary.scope})`}</Text>
256          <Markdown key="summary-text" text={summary.text} />
257          <Button key="summary-fill" label="入力欄に入れる" onPress={() => fillPrompt($)} />
258          {notice ? <Text key="notice" dimColor>{notice}</Text> : null}
259        </Box>
260      ) : null
261
262    // 新しい順。1 行 1 Button
263    const list = [...turns].reverse().map(x => (
264      <Button key={`turn-${x.turnId}`} plain onPress={() => update($, selectedA, v => (v === x.turnId ? null : x.turnId))}>
265        {x.errors > 0 || x.reason === 'error' ? <Text color="red">● </Text> : x.end === undefined ? <Text color="green">● </Text> : '  '}
266        {`${hm(x.start)} `}
267        <Text dimColor>{`${lenOf(x)} `}</Text>
268        {head(x.label, 16)}
269      </Button>
270    ))
271
272    return (
273      <Box flexDirection="column" gap={1}>
274        {Svg ? (
275          <Box key="charts" flexDirection="column" gap={1}>
276            <Svg key="totals" source={totalsSvg(totals)} alt={totalsAlt} />
277            <Svg key="timeline" source={timelineSvg(turns, now, selected)} alt={`帯のタイムライン ${turns.length}ターン`} />
278          </Box>
279        ) : (
280          <Box key="charts" flexDirection="column">
281            <Text key="totals" color={totals.isRunning ? 'green' : undefined}>{totalsAlt}</Text>
282            {longest ? <Text key="longest" dimColor>{`最長 ${lenOf(longest)} ${head(longest.label, 20)}`}</Text> : null}
283          </Box>
284        )}
285        <Box key="summary-actions" flexDirection="row" gap={1}>
286          <Button key="summarize" variant="primary" label="ここまでを要約" onPress={() => summarize($)} />
287        </Box>
288        {summaryView}
289        {detail}
290        <Box key="turns" flexDirection="column">
291          {list.length ? list : <Text key="empty" dimColor>まだターンがありません</Text>}
292        </Box>
293      </Box>
294    )
295  })
296}
297

1// SVG を文字列で組む関数と、表示用の小さな整形。描画面は <img> なので動きは SMIL だけ
2// 合計とタイムラインは 1 分ごと・ツールを呼ぶたびに描き直すので、動きは足さない (mod-guide 2 節)
3import type { RecapTurn } from '../types'
4import { C, HEADER_H, W, esc, frame, header } from './style'
5
6export type KindId = 'edit' | 'run' | 'look' | 'agent' | 'other' | 'none'
7
8/** ツールの種類。赤はエラー専用なので使わない。色はテーマに付いていくよう読むたびに C から引く */
9export const KINDS: { id: KindId; label: string; readonly color: string; tools: string[] }[] = [
10  { id: 'edit', label: '編集', get color() { return C.blue }, tools: ['Edit', 'Write', 'MultiEdit', 'NotebookEdit'] },
11  { id: 'run', label: '実行', get color() { return C.orange }, tools: ['Bash', 'PowerShell', 'Monitor', 'TaskStop', 'Skill'] },
12  { id: 'look', label: '調べ', get color() { return C.purple }, tools: ['Read', 'Grep', 'Glob', 'WebFetch', 'WebSearch', 'LSP', 'ToolSearch'] },
13  { id: 'agent', label: 'エージェント', get color() { return C.green }, tools: ['Agent', 'Task', 'SendMessage'] },
14  { id: 'other', label: 'その他', get color() { return C.yellow }, tools: [] },
15  { id: 'none', label: '会話のみ', get color() { return C.dim }, tools: [] },
16]
17
18const kindOfTool = (tool: string): KindId => KINDS.find(k => k.tools.includes(tool))?.id ?? 'other'
19
20/** そのターンで一番使ったツールの種類。同数なら KINDS の並びで前の物 */
21export const kindOf = (t: RecapTurn): KindId => {
22  const sum: Partial<Record<KindId, number>> = {}
23  for (const [tool, n] of Object.entries(t.tools)) {
24    const k = kindOfTool(tool)
25    sum[k] = (sum[k] ?? 0) + n
26  }
27  let best: KindId = 'none'
28  for (const k of KINDS) if ((sum[k.id] ?? 0) > (sum[best] ?? 0)) best = k.id
29  return best
30}
31
32export const colorOf = (k: KindId) => KINDS.find(x => x.id === k)?.color ?? C.dim
33
34/** 制御文字 (タブ・改行・復帰を除く)。描く木や SVG に入ると拒まれてペインが閉じる */
35const CONTROL = /[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g
36
37export { esc }
38
39/** 先頭 n 字 (サロゲートペアを割らない)。切ったら「…」 */
40export const head = (s: string, n: number) => {
41  const a = Array.from(s.replace(/\s+/g, ' ').replace(CONTROL, '').trim())
42  return a.length > n ? `${a.slice(0, n).join('')}…` : a.join('')
43}
44
45/** 時刻 10:42 (動いている環境のローカル時刻) */
46export const hm = (ms: number) => {
47  const d = new Date(ms)
48  return `${d.getHours()}:${String(d.getMinutes()).padStart(2, '0')}`
49}
50
51/** 所要時間 8秒 / 4分 / 1時間5分 */
52export const dur = (ms: number) => {
53  const s = Math.max(0, Math.round(ms / 1000))
54  if (s < 60) return `${s}秒`
55  const m = Math.round(s / 60)
56  return m < 60 ? `${m}分` : `${Math.floor(m / 60)}時間${m % 60}分`
57}
58
59/** 経過 h:mm */
60export const clock = (ms: number) => {
61  const min = Math.max(0, Math.floor(ms / 60_000))
62  return `${Math.floor(min / 60)}:${String(min % 60).padStart(2, '0')}`
63}
64
65/** 見出しの下から中身を始める y */
66const TOP = HEADER_H + 12
67
68const text = (x: number, y: number, s: string, size: number, fill: string, extra = '') =>
69  `<text x="${x}" y="${y}" font-size="${size}" fill="${fill}" ${extra}>${esc(s)}</text>`
70
71// ---- 合計 ----
72
73export type Totals = { elapsedMs: number; turns: number; tools: number; errors: number; longest?: RecapTurn; isRunning: boolean }
74
75export const totalsSvg = (t: Totals) => {
76  const cell = (i: number, label: string, value: string, fill: string = C.text) => {
77    const x = 16 + (i % 2) * 180
78    const y = TOP + Math.floor(i / 2) * 54
79    return (
80      `<rect x="${x}" y="${y}" width="168" height="44" rx="8" fill="${C.face}" stroke="${C.line}"/>` +
81      text(x + 10, y + 17, label, 12, C.dim) +
82      text(x + 10, y + 36, value, 16, fill, 'font-weight="bold"')
83    )
84  }
85  const status = t.isRunning
86    ? `<circle cx="${W - 70}" cy="23" r="4" fill="${C.green}">` +
87      `<animate attributeName="opacity" values="1;0.2;1" dur="1.2s" repeatCount="indefinite"/></circle>` +
88      text(W - 16, 28, '実行中', 12, C.green, 'text-anchor="end"')
89    : text(W - 16, 28, '待機中', 12, C.dim, 'text-anchor="end"')
90  const longest = t.longest?.end !== undefined ? dur(t.longest.end - t.longest.start) : '─'
91  return frame(
92    t.longest ? 186 : 168,
93    header('ふりかえり', '', t.isRunning ? C.green : C.blue) +
94      status +
95      cell(0, '経過', clock(t.elapsedMs)) +
96      cell(1, 'ターン', `${t.turns}`) +
97      cell(2, 'ツール', `${t.tools}回`) +
98      cell(3, 'エラー', `${t.errors}`, t.errors > 0 ? C.red : C.text) +
99      (t.longest ? text(16, 174, `最長 ${longest}  ${head(t.longest.label, 18)}`, 12, C.dim) : ''),
100  )
101}
102
103// ---- 帯のタイムライン ----
104
105const STEPS_MIN = [1, 2, 5, 10, 15, 30, 60, 120, 240, 480, 1440]
106const MAX_LANES = 8
107const LANE_H = 32
108const X0 = 60
109const X1 = W - 16
110
111/** 1 行の長さ (ms)。行が MAX_LANES に収まる一番細かい刻み */
112export const laneStep = (spanMs: number) =>
113  (STEPS_MIN.find(m => Math.ceil(spanMs / (m * 60_000)) <= MAX_LANES) ?? STEPS_MIN[STEPS_MIN.length - 1]!) * 60_000
114
115export const timelineSvg = (turns: RecapTurn[], now: number, selected: string | null) => {
116  const first = turns[0]
117  if (!first) {
118    return frame(80, header('タイムライン') + text(16, 68, 'まだターンがありません', 12, C.dim))
119  }
120  const endOf = (t: RecapTurn) => t.end ?? now
121  const last = Math.max(...turns.map(endOf))
122  const step = laneStep(last - Math.min(...turns.map(t => t.start)) + 1)
123  // 始まりを見ていないターンは後から足されるので、並びの先頭が一番早いとは限らない
124  const t0 = Math.floor(Math.min(...turns.map(t => t.start)) / step) * step
125  const lanes = Math.max(1, Math.ceil((last - t0) / step))
126  const px = (X1 - X0) / step
127
128  // [a, b) を行ごとに切って、行番号と x 範囲を返す
129  const pieces = (a: number, b: number) => {
130    const out: { lane: number; x: number; w: number }[] = []
131    for (let i = Math.floor((a - t0) / step); i < lanes && t0 + i * step < b; i++) {
132      const s = Math.max(a, t0 + i * step)
133      const e = Math.min(b, t0 + (i + 1) * step)
134      out.push({ lane: i, x: X0 + (s - t0 - i * step) * px, w: Math.max(3, (e - s) * px) })
135    }
136    return out
137  }
138  const trackY = (lane: number) => TOP + 6 + lane * LANE_H
139
140  let body = header('タイムライン', `1行 = ${dur(step)}`)
141  for (let i = 0; i < lanes; i++) {
142    const y = trackY(i)
143    body +=
144      text(16, y + 12, hm(t0 + i * step), 12, C.dim) +
145      `<rect x="${X0}" y="${y}" width="${X1 - X0}" height="16" rx="3" fill="${C.face}"/>`
146  }
147  // 待ち時間: 最初のターンから最後までを薄い破線で引き、その上に帯を重ねる
148  for (const p of pieces(t0, last)) {
149    const y = trackY(p.lane) + 8
150    body += `<line x1="${p.x}" y1="${y}" x2="${p.x + p.w}" y2="${y}" stroke="${C.dim}" stroke-width="1" stroke-dasharray="2 3" opacity="0.6"/>`
151  }
152  for (const t of turns) {
153    const color = colorOf(kindOf(t))
154    const ps = pieces(t.start, endOf(t))
155    for (const p of ps) {
156      const isSel = t.turnId === selected
157      body +=
158        `<rect x="${p.x.toFixed(1)}" y="${trackY(p.lane) + 2}" width="${p.w.toFixed(1)}" height="12" rx="2" fill="${color}"` +
159        (isSel ? ` stroke="${C.text}" stroke-width="1.5"` : '') +
160        (t.end === undefined ? `><animate attributeName="opacity" values="1;0.35;1" dur="1.2s" repeatCount="indefinite"/></rect>` : '/>')
161    }
162    const tail = ps[ps.length - 1]
163    if (tail && (t.errors > 0 || t.reason === 'error')) {
164      body += `<circle cx="${(tail.x + tail.w).toFixed(1)}" cy="${trackY(tail.lane) - 1}" r="4" fill="${C.red}" stroke="${C.bg}" stroke-width="1"/>`
165    }
166  }
167
168  // 凡例
169  const ly = trackY(lanes) + 14
170  let x = 16
171  let legend = ''
172  const item = (row: number, swatch: string, label: string) => {
173    const w = 18 + Array.from(label).length * 12 + 12
174    if (x + w > W - 8) return
175    legend += `<g transform="translate(${x} ${ly + row * 22})">${swatch}${text(16, 11, label, 12, C.dim)}</g>`
176    x += w
177  }
178  for (const k of KINDS.filter(k => k.id !== 'none')) item(0, `<rect x="0" y="1" width="11" height="11" rx="2" fill="${k.color}"/>`, k.label)
179  x = 16
180  item(1, `<rect x="0" y="1" width="11" height="11" rx="2" fill="${C.dim}"/>`, '会話のみ')
181  item(1, `<line x1="0" y1="7" x2="11" y2="7" stroke="${C.dim}" stroke-dasharray="2 3"/>`, '待ち')
182  item(1, `<circle cx="5.5" cy="6.5" r="4" fill="${C.red}"/>`, 'エラー')
183  return frame(ly + 22 + 22, body + legend)
184}
185
186// ---- 要約中 ----
187
188export const busySvg = () =>
189  frame(
190    HEADER_H,
191    header('要約中') +
192      [0, 1, 2]
193        .map(
194          i =>
195            `<circle cx="${80 + i * 12}" cy="22" r="3.5" fill="${C.blue}">` +
196            `<animate attributeName="opacity" values="0.2;1;0.2" dur="1.2s" begin="${(i * 0.3).toFixed(1)}s" repeatCount="indefinite"/></circle>`,
197        )
198        .join(''),
199  )
200

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/** メインループのターン 1 回の記録 */
2export type RecapTurn = {
3  turnId: string
4  /** 始まった時刻 (ms) */
5  start: number
6  /** 終わった時刻 (ms)。無ければ実行中 */
7  end?: number
8  /** 一覧に出す名前: 依頼の先頭 60 字、スラッシュコマンドは「/名前」 */
9  label: string
10  /** 依頼の先頭 300 字 (コマンドは「/名前 引数」) */
11  prompt: string
12  /** ツール名ごとの回数 */
13  tools: Record<string, number>
14  /** 失敗したツール呼び出しの回数 */
15  errors: number
16  /** turn.complete の reason */
17  reason?: 'answer' | 'aborted' | 'refusal' | 'error'
18}
19
20export type RecapSummary = {
21  status: 'idle' | 'running' | 'done' | 'failed'
22  /** done: 要約の Markdown / failed: 理由 */
23  text: string
24  /** 何についての要約か (「ここまで」「10:42 のターンまで」) */
25  scope: string
26  /** 押した時刻 (ms) */
27  at: number
28}
29
30declare module 'claude-code' {
31  interface PluginState {
32    'session-recap': {
33      /** 直近 100 ターン、古い順 */
34      turns: RecapTurn[]
35      /** 計測を始めた時刻 (ms)。0 は未設定 */
36      startedAt: number
37      /** prompt.submit で見たスラッシュコマンド。次の turn.start で使って消す */
38      pending: { name: string; args: string; at: number } | null
39      /** 詳細を開いているターンの turnId */
40      selected: string | null
41      summary: RecapSummary
42      /** 「入力欄に入れる」の結果の一言 */
43      notice: string
44      /** 登録できたコマンド名 ('recap' か 'session-recap')。'' は未登録 */
45      command: string
46    }
47  }
48}
49