edit-log

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { EditLogDetail, EditLogEntry } from '../types'
5import { detailLines, detailSvg, diffBody, fileStats, linesOf, overviewLines, overviewSvg, parentDir, plain, relPath } from './editlog'
6import { clean, followTheme, readTheme } from './style'
7
8const PANE = 'edit-log'
9const TITLE = '変更ログ'
10const DESCRIPTION = 'このセッションで Claude が変えたファイルを時系列で見る'
11/** 覚えておく回数。超えたら古い物から捨てる */
12const KEEP = 300
13// ファイルを変えるツール。MultiEdit はこのビルドの表に無いので名前の文字列で比べる
14const WRITERS = new Set(['Edit', 'Write', 'MultiEdit', 'NotebookEdit'])
15
16const ENTRIES = atom({ plugin: 'edit-log', key: 'entries' } as const, [] as EditLogEntry[])
17const SELECTED = atom({ plugin: 'edit-log', key: 'selected' } as const, '')
18const DETAIL = atom({ plugin: 'edit-log', key: 'detail' } as const, { kind: 'loading' } as EditLogDetail)
19const NOTE = atom({ plugin: 'edit-log', key: 'note' } as const, '')
20
21type $ = EngineInterface
22
23const str = (v: unknown) => (typeof v === 'string' ? v : '')
24const message = (err: unknown) => plain(err instanceof Error ? err.message : String(err))
25
26// ponytail: 主の名前を持てたかはモジュール変数。リロードでも session.start が来て決め直す
27let ownsMain = false
28
29async function record($: $, tool: string, input: Record<string, unknown>, isError: boolean, isSub: boolean) {
30  const file = str(input.file_path) || str(input.notebook_path)
31  if (file === '') return
32  const cwd = await $.session.cwd().catch(() => '')
33  const at = await $.clock.now()
34  await update($, ENTRIES, list => {
35    const id = (list[list.length - 1]?.id ?? 0) + 1
36    // file は git に渡すのでそのまま。label は画面と入力欄の文にだけ使うので制御文字を落とす
37    const entry: EditLogEntry = { id, at, file, label: clean(relPath(cwd, file)), tool, isError, lines: linesOf(tool, input), isSub }
38    return [...list, entry].slice(-KEEP)
39  })
40}
41
42// git を読むだけ。書き込む操作は呼ばない。
43// --literal-pathspecs: パスの [ ] * を形として読まない。core.fsmonitor=false: リポジトリが指すコマンドを走らせない。
44// GIT_OPTIONAL_LOCKS=0: 読むついでに index を書き直さない。log.showSignature=false: gpg.program を走らせない。
45// ponytail: filter.<name>.clean は止める -c が無い (diff-files が作業ツリーを読む時に走りうる)。mod-guide の限界に書く
46const git = ($: $, cwd: string, args: string[]) =>
47  $.process.run(['git', '-c', 'core.quotePath=false', '-c', 'core.fsmonitor=false', '-c', 'log.showSignature=false', '--literal-pathspecs', ...args], {
48    cwd,
49    env: { GIT_OPTIONAL_LOCKS: '0' },
50    timeoutMs: 15_000,
51  })
52
53// 差分の形。--no-textconv・--no-ext-diff: リポジトリの設定が指すコマンドを走らせない
54const DIFF_OPTS = ['-p', '--no-color', '--no-ext-diff', '--no-textconv']
55
56async function loadDiff($: $, label: string, file: string): Promise<EditLogDetail> {
57  try {
58    // ファイルの親フォルダで走らせる (作業フォルダの外の worktree のファイルもそのリポジトリで読む)
59    const cwd = parentDir(file) || (await $.session.cwd())
60    const inside = await git($, cwd, ['rev-parse', '--is-inside-work-tree'])
61    if (inside.exitCode !== 0 || inside.stdout.trim() !== 'true') return { kind: 'not-repo' }
62    // HEAD と比べて、git add した後の変更も出す。まだコミットが無ければ作業ツリーと index の差だけ。
63    // git diff は GIT_OPTIONAL_LOCKS を見ずに index を書き直すので、書かない diff-index / diff-files を使う
64    const head = await git($, cwd, ['diff-index', ...DIFF_OPTS, 'HEAD', '--', file])
65    const d = head.exitCode === 0 ? head : await git($, cwd, ['diff-files', ...DIFF_OPTS, '--', file])
66    if (d.exitCode !== 0) return { kind: 'error', message: plain(d.stderr.trim()) || `git diff が失敗しました (${label})` }
67    const body = diffBody(d.stdout)
68    if (body) return { kind: 'diff', ...body }
69    return /^(?:Binary files |GIT binary patch|old mode )/m.test(d.stdout) ? { kind: 'meta' } : { kind: 'clean' }
70  } catch (err) {
71    return { kind: 'error', message: message(err) }
72  }
73}
74
75async function openDetail($: $, label: string, file: string) {
76  await update($, NOTE, () => '')
77  await update($, SELECTED, () => label)
78  await update($, DETAIL, () => ({ kind: 'loading' }))
79  const detail = await loadDiff($, label, file)
80  // 読んでいる間に別のファイルを開いたら捨てる
81  if ((await read($, SELECTED)) === label) await update($, DETAIL, () => detail)
82}
83
84const closeDetail = async ($: $) => {
85  await update($, SELECTED, () => '')
86  await update($, NOTE, () => '')
87}
88
89async function reset($: $) {
90  await update($, ENTRIES, () => [])
91  await closeDetail($)
92}
93
94const REFUSAL: Record<string, string> = {
95  no_composer: 'この画面には入力欄がありません',
96  dialog: 'ダイアログが開いているので入れられませんでした',
97}
98
99async function fill($: $, text: string) {
100  let note: string
101  try {
102    const r = await $.prompt.fill({ text, mode: 'insert' })
103    note = r.isFilled
104      ? '入力欄に入れました(送信はしていません)'
105      : `入力欄に入れられませんでした: ${(r.refusal && REFUSAL[r.refusal]) || 'ほかの mod か画面に断られました'}`
106  } catch (err) {
107    note = `入力欄に入れられませんでした: ${message(err)}`
108  }
109  await update($, NOTE, () => note)
110}
111
112const reviewText = (label: string) =>
113  `${label} をレビューしてください。このセッションで変えたところ(git diff)を中心に、` +
114  'バグ・抜け・直したほうがよい点を、行を挙げて教えてください。'
115const explainText = (label: string) =>
116  `${label} にこのセッションで入れた変更(git diff)を読んで、何をなぜ変えたのかを短く説明してください。`
117
118const openPane = async ($: $) => {
119  await $.ui.open({ id: PANE, title: TITLE })
120  return { text: '変更ログを開きました。' }
121}
122
123export const register: Register = on => {
124  followTheme(on)
125  on('session.start', async ($, e, next) => {
126    const started = await next(e)
127    await readTheme($)
128    // /edits が拒まれたら (組み込みと被ったら) /edit-log にする
129    const got = await $.command.register({ name: 'edits', description: DESCRIPTION }).catch(() => undefined)
130    ownsMain = got?.command === 'edits'
131    if (!ownsMain) await $.command.register({ name: 'edit-log', description: DESCRIPTION }).catch(() => {})
132    return started
133  })
134
135  // /edits を持てなかった時は、その名前の持ち主 (組み込みなど) に回す
136  on('command.run', { command: 'edits' }, ($, e, next) => (ownsMain ? openPane($) : next(e))).catch(($, e, next) => next(e))
137  // /edits を持てた時は /edit-log を登録していないので、同じ名前の別のコマンドに回す
138  on('command.run', { command: 'edit-log' }, ($, e, next) => (ownsMain ? next(e) : openPane($)))
139
140  // /clear で記録を空にする
141  on('session.end', async ($, e, next) => {
142    if (e.reason === 'clear') await reset($)
143    return next(e)
144  })
145
146  // 見るだけ。ツールが終わってから記録する (失敗してもツールは止めない)
147  on('tool.call', async ($, e, next) => {
148    const ran = await next(e)
149    const tool = String(e.tool)
150    if (WRITERS.has(tool)) {
151      const isError = ran.deny !== undefined || ran.isError === true
152      await record($, tool, e as unknown as Record<string, unknown>, isError, e.agentId !== undefined)
153    }
154    return ran
155  }).catch(($, e, next) => next(e))
156
157  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
158    const t = $.ui.resolve(e)
159    const { Box, Text, Button, Code } = t
160    // terminal の表にも Svg の名前があるので、画面の種類でも分ける
161    const Svg = e.surface !== 'terminal' && 'Svg' in t ? t.Svg : undefined
162    const entries = await read($, ENTRIES)
163    const selected = await read($, SELECTED)
164    const note = await read($, NOTE)
165    const noteText = note !== '' && <Text color={note.startsWith('入力欄に入れました') ? 'green' : 'warning'}>{note}</Text>
166
167    const linesBox = (lines: ReturnType<typeof overviewLines>) => (
168      <Box key="lines" flexDirection="column">
169        {lines.map(l => (
170          <Text color={l.color} dimColor={l.isDim} bold={l.isBold}>
171            {l.text}
172          </Text>
173        ))}
174      </Box>
175    )
176
177    if (selected === '') {
178      const lines = overviewLines(entries)
179      const stats = fileStats(entries)
180      return (
181        <Box flexDirection="column" gap={1}>
182          {Svg ? <Svg source={overviewSvg(entries)} alt={lines.map(l => l.text).join('\n')} /> : linesBox(lines)}
183          {stats.length > 0 && (
184            <Box key="files" flexDirection="column">
185              <Text dimColor>ファイルを押すと履歴と差分</Text>
186              {stats.map(f => (
187                <Button key={`file:${f.label}`} plain onPress={() => void openDetail($, f.label, f.file)}>
188                  {f.label} <Text dimColor>{f.fails ? `${f.count}回 失敗${f.fails}` : `${f.count}回`}</Text>
189                </Button>
190              ))}
191            </Box>
192          )}
193          {entries.length > 0 && <Button key="reset" dimColor label="リセット" onPress={() => void reset($)} />}
194          {noteText}
195        </Box>
196      )
197    }
198
199    const detail = await read($, DETAIL)
200    const lines = detailLines(selected, entries)
201    let diff
202    if (detail.kind === 'loading') diff = <Text dimColor>差分を読み込み中</Text>
203    else if (detail.kind === 'not-repo') diff = <Text color="warning">差分は git のフォルダでだけ出ます</Text>
204    else if (detail.kind === 'clean')
205      diff = <Text dimColor>git の差分はありません(コミット済みか、git が追っていない新しいファイル)</Text>
206    else if (detail.kind === 'meta') diff = <Text dimColor>バイナリか権限だけの変更です</Text>
207    else if (detail.kind === 'error') diff = <Text color="red">{`git の差分を読めません: ${detail.message}`}</Text>
208    else
209      diff = (
210        <Box key="diff" flexDirection="column">
211          <Code source={detail.diff} format="diff" />
212          {detail.isCut && <Text dimColor>長いので途中までです</Text>}
213        </Box>
214      )
215    return (
216      <Box flexDirection="column" gap={1}>
217        {Svg ? <Svg source={detailSvg(selected, entries)} alt={lines.map(l => l.text).join('\n')} /> : linesBox(lines)}
218        <Text bold>git の差分</Text>
219        {diff}
220        <Box key="actions" flexDirection="column">
221          <Button key="review" label="このファイルをレビューして" variant="primary" onPress={() => void fill($, reviewText(selected))} />
222          <Button key="explain" dimColor label="この変更を説明して" onPress={() => void fill($, explainText(selected))} />
223          <Button key="back" dimColor label="一覧に戻る" onPress={() => void closeDetail($)} />
224        </Box>
225        {noteText}
226      </Box>
227    )
228  })
229}
230

1// 記録の集計と、SVG・terminal 用の行を組む。どれも純関数
2import type { EditLogEntry } from '../types'
3import { C, HEADER_H, countUp, fadeIn, frame, header } from './style'
4
5const MONO = 'ui-monospace, Consolas, monospace'
6/** 横棒に出すファイルの数 */
7export const TOP_FILES = 8
8/** タイムラインに出す回数 */
9export const TOP_EVENTS = 15
10/** 詳細の変更履歴に出す回数 */
11export const TOP_HISTORY = 30
12
13/** ツールの種類ごとの色。知らないツールは弱い色(C は今のテーマの色なので、呼ぶたびに引く) */
14const toolColor = (tool: string) =>
15  ({ Edit: C.blue, Write: C.green, MultiEdit: C.purple, NotebookEdit: C.orange })[tool] ?? C.dim
16
17/** 行数。末尾の改行 1 つは数えない */
18export const countLines = (s: unknown) => (typeof s !== 'string' || s === '' ? 0 : s.replace(/\r?\n$/, '').split('\n').length)
19
20/** ツールの入力から、置き換えた (書いた) 行数のおおよそ */
21export function linesOf(tool: string, input: Record<string, unknown>): number {
22  const pair = (x: unknown) => {
23    const o = (x ?? {}) as Record<string, unknown>
24    return Math.max(countLines(o.old_string), countLines(o.new_string))
25  }
26  if (tool === 'Edit') return pair(input)
27  if (tool === 'MultiEdit') return Array.isArray(input.edits) ? input.edits.reduce((n: number, x) => n + pair(x), 0) : 0
28  if (tool === 'Write') return countLines(input.content)
29  if (tool === 'NotebookEdit') return countLines(input.new_source)
30  return 0
31}
32
33/** 制御文字を落とす (タブと改行は残す)。エンジンは制御文字を含む Text・alt を描かない */
34export const plain = (s: string) => s.replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, '')
35
36/** 絶対パスのファイルの親フォルダ。根なら区切りを残す。相対パスなら空 (git は今の作業フォルダで走らせる) */
37export function parentDir(file: string) {
38  if (!/^(?:[A-Za-z]:)?[\\/]/.test(file)) return ''
39  const i = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'))
40  const dir = file.slice(0, i)
41  return dir === '' || /^[A-Za-z]:$/.test(dir) ? file.slice(0, i + 1) : dir
42}
43
44/** 作業フォルダの中なら相対パス、外なら区切りを / にしたパス */
45export function relPath(cwd: string, file: string) {
46  const f = file.replace(/\\/g, '/')
47  const c = cwd.replace(/\\/g, '/').replace(/\/+$/, '')
48  // ponytail: 大文字小文字を区別しない比較。Linux で大文字違いのフォルダが並ぶと相対にならないだけ
49  if (c !== '' && f.toLowerCase().startsWith(`${c.toLowerCase()}/`)) return f.slice(c.length + 1)
50  return f
51}
52
53export type FileStat = { label: string; file: string; count: number; fails: number; lines: number; last: number }
54
55/** ファイルごとの回数。回数の多い順、同じなら最近触った順 (last は最後の通し番号) */
56export function fileStats(entries: readonly EditLogEntry[]): FileStat[] {
57  const map = new Map<string, FileStat>()
58  for (const e of entries) {
59    const s = map.get(e.label) ?? { label: e.label, file: e.file, count: 0, fails: 0, lines: 0, last: 0 }
60    s.count++
61    if (e.isError) s.fails++
62    else s.lines += e.lines
63    s.file = e.file
64    s.last = Math.max(s.last, e.id)
65    map.set(e.label, s)
66  }
67  return [...map.values()].sort((a, b) => b.count - a.count || b.last - a.last)
68}
69
70export const summary = (entries: readonly EditLogEntry[]) => ({
71  files: new Set(entries.map(e => e.label)).size,
72  changes: entries.length,
73  fails: entries.filter(e => e.isError).length,
74  subs: entries.filter(e => e.isSub).length,
75})
76
77/**
78 * `git diff` の出力から Code (format: 'diff') に渡す部分を取り出す。
79 * 最初の @@ より前 (diff --git・index・---/+++) を落とし、長ければハンクの切れ目で切る。ハンクが無ければ undefined
80 */
81export function diffBody(raw: string, max = 60_000): { diff: string; isCut: boolean } | undefined {
82  // Code が描けるのはタブと改行だけ。CR や色の制御文字を落とす
83  const text = raw.replace(/[\x00-\x08\x0b-\x1f\x7f]/g, '')
84  const start = text.startsWith('@@') ? 0 : text.indexOf('\n@@') + 1
85  if (start === 0 && !text.startsWith('@@')) return undefined
86  let body = text.slice(start).replace(/\n+$/, '')
87  let isCut = false
88  if (body.length > max) {
89    const at = body.lastIndexOf('\n@@', max)
90    body = at > 0 ? body.slice(0, at) : body.slice(0, max)
91    isCut = true
92  }
93  return { diff: body, isCut }
94}
95
96/** 時:分:秒 */
97export const clockLabel = (ms: number) => {
98  const d = new Date(ms)
99  return [d.getHours(), d.getMinutes(), d.getSeconds()].map(n => String(n).padStart(2, '0')).join(':')
100}
101
102// 全角は 2、半角は 1 と数えた幅
103const wide = (ch: string) => /[⺀-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]/.test(ch)
104const units = (s: string) => [...s].reduce((n, ch) => n + (wide(ch) ? 2 : 1), 0)
105
106/** 幅に収まらなければ末尾を残して頭を … にする */
107export function tailFit(s: string, max: number) {
108  if (units(s) <= max) return s
109  const chars = [...s]
110  let out = ''
111  let n = 1
112  for (let i = chars.length - 1; i >= 0; i--) {
113    const ch = chars[i] ?? ''
114    n += wide(ch) ? 2 : 1
115    if (n > max) break
116    out = ch + out
117  }
118  return `…${out}`
119}
120
121const esc = (s: string) => plain(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
122const base = (p: string) => p.replace(/\/+$/, '').split('/').pop() || p
123const linesText = (e: { tool: string; lines: number }) => (e.tool === 'Write' ? `${e.lines}行` : `約${e.lines}行`)
124
125/** 共通の見出し帯の下に body を置く(body は見出しを除いた座標で書く) */
126const svgDoc = (h: number, body: string, title: string, sub = '') =>
127  frame(h + HEADER_H, header(title, sub, C.blue) + `<g transform="translate(0 ${HEADER_H})">${body}</g>`)
128
129/** 数のタイル。数字は 0 から増えて止まる(unit は数字の後ろに付ける) */
130const tile = (x: number, y: number, label: string, value: number, unit: string, color: string, delay = 0) =>
131  `<rect x="${x}" y="${y}" width="110" height="54" rx="6" fill="${C.bg}" stroke="${C.line}"/>` +
132  `<rect x="${x}" y="${y}" width="3" height="54" rx="1.5" fill="${color}"/>` +
133  `<text x="${x + 12}" y="${y + 17}" font-size="12" fill="${C.dim}">${label}</text>` +
134  countUp(value, `x="${x + 12}" y="${y + 45}" font-size="24" font-weight="bold" fill="${color}"`, n => `${n}${unit}`, delay)
135
136const grow = (from: number, to: number, attr: string) =>
137  `<animate attributeName="${attr}" from="${from}" to="${to}" dur="0.6s" calcMode="spline" keySplines="0.2 0.8 0.2 1" keyTimes="0;1" fill="freeze"/>`
138
139/** ツールの色の見本 */
140function legend(y: number) {
141  const items: [string, string][] = [
142    ['Edit', C.blue],
143    ['Write', C.green],
144    ['MultiEdit', C.purple],
145    ['Notebook', C.orange],
146    ['失敗', C.red],
147  ]
148  let x = 14
149  let s = `<g font-size="12" fill="${C.dim}">`
150  for (const [label, color] of items) {
151    s += `<circle cx="${x + 4}" cy="${y - 4}" r="4" fill="${color}"/><text x="${x + 12}" y="${y}">${label}</text>`
152    x += 12 + units(label) * 7 + 12
153  }
154  return `${s}</g>`
155}
156
157/** タイムラインの 1 行 (高さ 36)。isNewest は波紋を付ける */
158function eventRow(e: EditLogEntry, y: number, isNewest: boolean, withFile: boolean) {
159  const color = e.isError ? C.red : toolColor(e.tool)
160  let s = ''
161  if (isNewest)
162    s +=
163      `<circle cx="20" cy="${y + 8}" r="6" fill="none" stroke="${color}" stroke-width="2">` +
164      `<animate attributeName="r" values="6;13" dur="1.4s" repeatCount="3"/>` +
165      `<animate attributeName="opacity" values="1;0" dur="1.4s" repeatCount="3" fill="freeze"/></circle>`
166  s += e.isSub
167    ? `<circle cx="20" cy="${y + 8}" r="5" fill="${C.bg}" stroke="${color}" stroke-width="2" stroke-dasharray="2 2"/>`
168    : `<circle cx="20" cy="${y + 8}" r="5.5" fill="${color}"/>`
169  if (e.isError)
170    s += `<path d="M17 ${y + 5} L23 ${y + 11} M23 ${y + 5} L17 ${y + 11}" stroke="${C.bg}" stroke-width="2" stroke-linecap="round"/>`
171  s +=
172    `<text x="34" y="${y + 12}" font-size="12" font-family="${MONO}" fill="${C.dim}">${clockLabel(e.at)}</text>` +
173    `<text x="102" y="${y + 12}" font-size="12" font-weight="bold" fill="${color}">${esc(e.tool)}</text>`
174  if (e.isSub)
175    s +=
176      `<rect x="${110 + units(e.tool) * 7}" y="${y}" width="34" height="16" rx="8" fill="none" stroke="${C.purple}"/>` +
177      `<text x="${127 + units(e.tool) * 7}" y="${y + 12}" font-size="12" fill="${C.purple}" text-anchor="middle">サブ</text>`
178  s += e.isError
179    ? `<text x="368" y="${y + 12}" font-size="12" fill="${C.red}" text-anchor="end">失敗</text>`
180    : `<text x="368" y="${y + 12}" font-size="12" fill="${C.dim}" text-anchor="end">${linesText(e)}</text>`
181  if (withFile) s += `<text x="34" y="${y + 29}" font-size="13" fill="${C.text}">${esc(tailFit(e.label, 46))}</text>`
182  return s
183}
184
185function messageSvg(title: string, hint: string) {
186  return svgDoc(
187    96,
188    `<rect x="8" y="8" width="364" height="80" rx="8" fill="${C.face}" stroke="${C.line}"/>` +
189      `<g stroke="${C.blue}" stroke-width="2" fill="none" stroke-linecap="round">` +
190      `<rect x="22" y="24" width="20" height="26" rx="3"/><line x1="27" y1="32" x2="37" y2="32"/><line x1="27" y1="38" x2="37" y2="38"/><line x1="27" y1="44" x2="33" y2="44"/></g>` +
191      `<text x="54" y="42" font-size="15" font-weight="bold" fill="${C.text}">${esc(title)}</text>` +
192      `<text x="20" y="72" font-size="12" fill="${C.dim}">${esc(hint)}</text>`,
193    '編集の記録',
194  )
195}
196
197/** 一覧の SVG: タイル・ファイルごとの横棒・時刻のタイムライン */
198export function overviewSvg(entries: readonly EditLogEntry[]) {
199  if (entries.length === 0) return messageSvg('まだ変更はありません', 'Claude がファイルを変えると、ここに時系列で並びます')
200  const t = summary(entries)
201  let s = `<rect x="8" y="8" width="364" height="104" rx="8" fill="${C.face}" stroke="${C.line}"/>`
202  s += `<text x="18" y="32" font-size="15" font-weight="bold" fill="${C.text}">このセッションの変更</text>`
203  if (t.subs > 0) s += `<text x="364" y="32" font-size="12" fill="${C.purple}" text-anchor="end">うちサブ ${t.subs} 回</text>`
204  s += tile(16, 46, '触ったファイル', t.files, '本', C.blue)
205  s += tile(135, 46, '変更', t.changes, '回', C.green, 0.1)
206  s += tile(254, 46, '失敗', t.fails, '回', t.fails > 0 ? C.red : C.dim, 0.2)
207
208  // ── ファイルごとの回数
209  const stats = fileStats(entries)
210  const top = stats.slice(0, TOP_FILES)
211  const max = Math.max(1, ...top.map(f => f.count))
212  let y = 140
213  s += `<text x="12" y="${y}" font-size="13" font-weight="bold" fill="${C.text}">ファイルごとの回数</text>`
214  s += `<text x="368" y="${y}" font-size="12" fill="${C.dim}" text-anchor="end">${top.length} / ${stats.length}</text>`
215  y += 12
216  for (const f of top) {
217    const wAll = Math.max(4, (f.count / max) * 348)
218    const wFail = f.fails ? Math.max(3, (f.fails / f.count) * wAll) : 0
219    s +=
220      `<text x="16" y="${y + 13}" font-size="12" fill="${C.text}">${esc(tailFit(f.label, 38))}</text>` +
221      `<text x="364" y="${y + 13}" font-size="12" text-anchor="end">` +
222      (f.fails ? `<tspan fill="${C.red}">失敗${f.fails}</tspan><tspan dx="6" fill="${C.text}">${f.count}回</tspan>` : `<tspan fill="${C.text}">${f.count}回</tspan>`) +
223      `</text>` +
224      `<rect x="16" y="${y + 19}" width="348" height="8" rx="4" fill="${C.face}"/>` +
225      `<rect x="16" y="${y + 19}" width="${wAll}" height="8" rx="4" fill="${C.blue}">${grow(0, wAll, 'width')}</rect>`
226    // 失敗の分は棒の頭に赤で重ねる
227    if (wFail) s += `<rect x="16" y="${y + 19}" width="${wFail}" height="8" rx="4" fill="${C.red}">${grow(0, wFail, 'width')}</rect>`
228    y += 34
229  }
230  if (stats.length > TOP_FILES) {
231    s += `<text x="16" y="${y + 6}" font-size="12" fill="${C.dim}">ほか ${stats.length - TOP_FILES} 本</text>`
232    y += 16
233  }
234
235  // ── タイムライン (新しい順)
236  y += 24
237  s += `<text x="12" y="${y}" font-size="13" font-weight="bold" fill="${C.text}">タイムライン</text>`
238  y += 22
239  s += legend(y)
240  y += 14
241  const recent = entries.slice(-TOP_EVENTS).reverse()
242  if (recent.length > 1) s += `<line x1="20" y1="${y + 8}" x2="20" y2="${y + 8 + (recent.length - 1) * 40}" stroke="${C.line}" stroke-width="2"/>`
243  recent.forEach((e, i) => {
244    s += fadeIn(eventRow(e, y, i === 0, true), Number((0.3 + Math.min(i, 8) * 0.05).toFixed(2)))
245    y += 40
246  })
247  if (entries.length > TOP_EVENTS) {
248    s += `<text x="34" y="${y + 12}" font-size="12" fill="${C.dim}">ほか ${entries.length - TOP_EVENTS} 回 (古い物)</text>`
249    y += 20
250  }
251  return svgDoc(y + 8, s, '編集の記録', `${entries.length} 回`)
252}
253
254/** 詳細の SVG: そのファイルの合計と変更履歴 */
255export function detailSvg(label: string, entries: readonly EditLogEntry[]) {
256  const mine = entries.filter(e => e.label === label)
257  const fails = mine.filter(e => e.isError).length
258  const lines = mine.filter(e => !e.isError).reduce((n, e) => n + e.lines, 0)
259  let s = `<rect x="8" y="8" width="364" height="126" rx="8" fill="${C.face}" stroke="${C.line}"/>`
260  s += `<text x="18" y="34" font-size="17" font-weight="bold" fill="${C.text}">${esc(tailFit(base(label), 40))}</text>`
261  s += `<text x="18" y="54" font-size="12" fill="${C.dim}">${esc(tailFit(label, 52))}</text>`
262  s += tile(16, 70, '変更', mine.length, '回', C.green)
263  s += tile(135, 70, '失敗', fails, '回', fails > 0 ? C.red : C.dim, 0.1)
264  s += tile(254, 70, '行のめやす', lines, '', C.blue, 0.2)
265  let y = 162
266  s += `<text x="12" y="${y}" font-size="13" font-weight="bold" fill="${C.text}">このファイルの変更履歴</text>`
267  y += 14
268  const rows = mine.slice(-TOP_HISTORY).reverse()
269  if (rows.length > 1) s += `<line x1="20" y1="${y + 8}" x2="20" y2="${y + 8 + (rows.length - 1) * 24}" stroke="${C.line}" stroke-width="2"/>`
270  rows.forEach((e, i) => {
271    s += eventRow(e, y, i === 0, false)
272    y += 24
273  })
274  if (mine.length > TOP_HISTORY) {
275    s += `<text x="34" y="${y + 4}" font-size="12" fill="${C.dim}">ほか ${mine.length - TOP_HISTORY} 回 (古い物)</text>`
276    y += 16
277  }
278  return svgDoc(y + 8, s, 'ファイルの変更', `${mine.length} 回`)
279}
280
281export type Line = { text: string; color?: string; isDim?: boolean; isBold?: boolean }
282
283const rowText = (e: EditLogEntry) =>
284  `${clockLabel(e.at)} ${e.tool}${e.isSub ? '(サブ)' : ''} ${e.isError ? '失敗' : linesText(e)}`
285
286/** Svg の alt と terminal で使う、一覧の行 */
287export function overviewLines(entries: readonly EditLogEntry[]): Line[] {
288  if (entries.length === 0) return [{ text: 'まだ変更はありません', isDim: true }]
289  const t = summary(entries)
290  const lines: Line[] = [
291    { text: `触ったファイル ${t.files}本 / 変更 ${t.changes}回 / 失敗 ${t.fails}回`, isBold: true },
292    { text: 'タイムライン(新しい順)', isBold: true },
293  ]
294  for (const e of entries.slice(-TOP_EVENTS).reverse())
295    lines.push({ text: `${rowText(e)} ${e.label}`, color: e.isError ? 'red' : undefined, isDim: e.isSub })
296  if (entries.length > TOP_EVENTS) lines.push({ text: `ほか ${entries.length - TOP_EVENTS} 回`, isDim: true })
297  return lines
298}
299
300/** Svg の alt と terminal で使う、詳細の行 */
301export function detailLines(label: string, entries: readonly EditLogEntry[]): Line[] {
302  const mine = entries.filter(e => e.label === label)
303  return [
304    { text: label, isBold: true },
305    { text: `変更 ${mine.length}回 / 失敗 ${mine.filter(e => e.isError).length}回` },
306    ...mine.slice(-TOP_HISTORY).reverse().map(e => ({ text: rowText(e), color: e.isError ? 'red' : undefined, isDim: e.isSub })),
307  ]
308}
309

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 EditLogEntry = {
3  /** セッションの中での通し番号 (1 から) */
4  id: number
5  /** 終わった時刻 (ms) */
6  at: number
7  /** ツールが受け取ったパス (git に渡す) */
8  file: string
9  /** 画面に出す名前。作業フォルダの中なら相対パス */
10  label: string
11  /** Edit / Write / MultiEdit / NotebookEdit */
12  tool: string
13  isError: boolean
14  /** 置き換えた (書いた) 行数のおおよそ */
15  lines: number
16  /** サブエージェントの呼び出し */
17  isSub: boolean
18}
19
20/** 詳細を開いたファイルの git の差分 */
21export type EditLogDetail =
22  | { kind: 'loading' }
23  | { kind: 'diff'; diff: string; isCut: boolean }
24  | { kind: 'clean' }
25  /** 差分はあるが行の変化が無い (バイナリか、権限だけ) */
26  | { kind: 'meta' }
27  | { kind: 'not-repo' }
28  | { kind: 'error'; message: string }
29
30declare module 'claude-code' {
31  interface PluginState {
32    'edit-log': {
33      /** 古い順。上限を超えたら古い物から捨てる */
34      entries: EditLogEntry[]
35      /** 詳細を開いているファイル (EditLogEntry.label)。空なら一覧 */
36      selected: string
37      detail: EditLogDetail
38      /** ボタンの結果などの一言。空なら出さない */
39      note: string
40    }
41  }
42}
43