file-map

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { FileMapFilter, FileTouch } from '../types'
5import { TOP, fileMapSvg, groupLines, pathOf, placeOf, ranked, summaryText, topText } from './filemap'
6import { followTheme, readTheme } from './style'
7
8const PANE = 'file-map'
9const TITLE = 'ファイルの地図'
10const DESCRIPTION = 'このセッションで触ったファイルをフォルダごとの四角で見る'
11/** 覚えておくファイルの数。超えたら古く触った物から捨てる */
12const KEEP = 1000
13
14const READERS = new Set(['Read', 'Grep', 'Glob'])
15// MultiEdit はこのビルドの表に無いので名前の文字列で比べる
16const WRITERS = new Set(['Edit', 'Write', 'MultiEdit', 'NotebookEdit'])
17
18const FILES = atom({ plugin: 'file-map', key: 'files' } as const, [] as FileTouch[])
19const FILTER = atom({ plugin: 'file-map', key: 'filter' } as const, 'all' as FileMapFilter)
20
21type $ = EngineInterface
22
23async function record($: $, tool: string, file: string, isSub: boolean) {
24  const cwd = await $.session.cwd().catch(() => '')
25  const at = await $.clock.now()
26  const { label, group } = placeOf(cwd, file)
27  const isWrite = WRITERS.has(tool)
28  await update($, FILES, list => {
29    const old = list.find(f => f.label === label)
30    const f: FileTouch = {
31      label,
32      group,
33      reads: (old?.reads ?? 0) + (isWrite ? 0 : 1),
34      writes: (old?.writes ?? 0) + (isWrite ? 1 : 0),
35      subs: (old?.subs ?? 0) + (isSub ? 1 : 0),
36      last: at,
37    }
38    const rest = list.filter(x => x.label !== label)
39    return [...(rest.length >= KEEP ? [...rest].sort((a, b) => b.last - a.last).slice(0, KEEP - 1) : rest), f]
40  })
41}
42
43// ponytail: 主の名前を持てたかはモジュール変数。リロードでも session.start が来て決め直す
44let ownsMain = false
45
46const openPane = async ($: $) => {
47  await $.ui.open({ id: PANE, title: TITLE })
48  return { text: 'ファイルの地図を開きました。' }
49}
50
51export const register: Register = on => {
52  followTheme(on)
53
54  on('session.start', async ($, e, next) => {
55    const started = await next(e)
56    // /filemap が拒まれたら /file-map にする
57    const got = await $.command.register({ name: 'filemap', description: DESCRIPTION }).catch(() => undefined)
58    ownsMain = got?.command === 'filemap'
59    if (!ownsMain) await $.command.register({ name: 'file-map', description: DESCRIPTION }).catch(() => {})
60    await readTheme($)
61    return started
62  })
63
64  // /filemap を持てなかった時は、その名前の持ち主に回す
65  on('command.run', { command: 'filemap' }, ($, e, next) => (ownsMain ? openPane($) : next(e))).catch(($, e, next) => next(e))
66  on('command.run', { command: 'file-map' }, openPane)
67
68  on('session.end', async ($, e, next) => {
69    if (e.reason === 'clear') await update($, FILES, () => [])
70    return next(e)
71  })
72
73  // 見るだけ。ツールが終わってから数える (断られた・失敗した呼び出しは数えない)
74  on('tool.call', async ($, e, next) => {
75    const r = await next(e)
76    const tool = String(e.tool)
77    if ((READERS.has(tool) || WRITERS.has(tool)) && r.deny === undefined && r.isError !== true) {
78      const file = pathOf(tool, e as unknown as Record<string, unknown>)
79      if (file !== '') await record($, tool, file, e.agentId !== undefined)
80    }
81    return r
82  }).catch(($, e, next) => next(e))
83
84  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
85    const t = $.ui.resolve(e)
86    const { Box, Text, Button } = t
87    // terminal の表にも Svg の名前があるので、画面の種類でも分ける
88    const Svg = e.surface !== 'terminal' && 'Svg' in t ? t.Svg : undefined
89    const files = await read($, FILES)
90    const filter = await read($, FILTER)
91    const top = ranked(files, filter).slice(0, TOP)
92    const setFilter = (v: FileMapFilter) => () => void update($, FILTER, () => v)
93
94    return (
95      <Box flexDirection="column" gap={1}>
96        {Svg ? (
97          <Svg key="map" source={fileMapSvg(files, filter)} alt={summaryText(files, filter)} />
98        ) : (
99          <Box key="groups" flexDirection="column">
100            {groupLines(files, filter).map((l, i) => (
101              <Text key={`group-${i}`} color={l.color} dimColor={l.isDim} bold={l.isBold}>
102                {l.text}
103              </Text>
104            ))}
105          </Box>
106        )}
107        <Box key="filters" flexDirection="row" gap={1}>
108          <Button key="filter-all" label="全部" variant={filter === 'all' ? 'primary' : undefined} dimColor={filter !== 'all'} onPress={setFilter('all')} />
109          <Button key="filter-written" label="書いた物だけ" variant={filter === 'written' ? 'primary' : undefined} dimColor={filter !== 'written'} onPress={setFilter('written')} />
110        </Box>
111        {top.length > 0 && (
112          <Box key="top" flexDirection="column">
113            <Text key="top-head" bold>{`多く触った順 ${top.length} 件`}</Text>
114            {top.map((f, i) => (
115              <Text key={`top-${i}`} color={f.writes > 0 ? 'yellow' : undefined}>
116                {topText(f)}
117              </Text>
118            ))}
119          </Box>
120        )}
121        {files.length > 0 && <Button key="reset" dimColor label="記録を消す" onPress={() => void update($, FILES, () => [])} />}
122      </Box>
123    )
124  })
125}
126

1// パスのまとめ方・squarified ツリーマップの配置・SVG と terminal 用の行。どれも純関数(shots.mts が node で直に読む)
2import type { FileMapFilter, FileTouch } from '../types'
3import { C, HEADER_H, W, clean, esc, fadeIn, frame, header } from './style'
4
5export const ROOT = '直下'
6export const OUTSIDE = '外'
7/** 一覧に出す数 */
8export const TOP = 8
9/** 地図に描くファイルの数の上限 (多く触った順)。SVG の source を 131,072 字に収める */
10export const MAX_CELLS = 200
11
12const isAbs = (p: string) => /^(?:[A-Za-z]:)?\//.test(p)
13
14/**
15 * 作業フォルダからの相対パスと、まとめる先 (上の 2 段のフォルダ)。区切りは \ と / のどちらでもよい。
16 * 外のファイルは「外」、相対パスで来た物は作業フォルダからと見る
17 */
18export function placeOf(cwd: string, file: string): { label: string; group: string } {
19  const f = clean(file).replace(/\\/g, '/').replace(/\/+$/, '')
20  const c = clean(cwd).replace(/\\/g, '/').replace(/\/+$/, '')
21  let rel: string
22  // ponytail: 大文字小文字を区別しない比較 (Windows 向け)。Linux で大文字違いのフォルダが並ぶと同じ物に見えるだけ
23  if (c !== '' && f.toLowerCase() === c.toLowerCase()) rel = '.'
24  else if (c !== '' && f.toLowerCase().startsWith(`${c.toLowerCase()}/`)) rel = f.slice(c.length + 1)
25  else if (!isAbs(f)) rel = f.replace(/^(?:\.\/)+/, '') || '.'
26  else return { label: f, group: OUTSIDE }
27  const dirs = rel.split('/').filter(Boolean).slice(0, -1)
28  return { label: rel, group: dirs.length ? dirs.slice(0, 2).join('/') : ROOT }
29}
30
31const str = (v: unknown) => (typeof v === 'string' ? v : '')
32
33/** ツールの入力から触ったパス。Grep・Glob は path が無ければ空 (数えない) */
34export const pathOf = (tool: string, input: Record<string, unknown>) =>
35  tool === 'NotebookEdit' ? str(input.notebook_path) : tool === 'Grep' || tool === 'Glob' ? str(input.path) : str(input.file_path)
36
37export const countOf = (f: FileTouch) => f.reads + f.writes
38export const pick = (files: readonly FileTouch[], filter: FileMapFilter) => files.filter(f => countOf(f) > 0 && (filter === 'all' || f.writes > 0))
39
40/** 多く触った順。同じなら最近触った順 */
41export const ranked = (files: readonly FileTouch[], filter: FileMapFilter) =>
42  pick(files, filter).sort((a, b) => countOf(b) - countOf(a) || b.last - a.last)
43
44export const baseName = (p: string) => p.split('/').filter(Boolean).pop() ?? p
45
46// ---- squarified ツリーマップ ----
47
48export type Rect = { x: number; y: number; w: number; h: number }
49export type Cell = Rect & { key: string }
50
51/**
52 * Bruls らの squarified の配置。面積は weight に比べ、四角はなるべく正方形に近づける。
53 * weight が 0 以下の物は置かない。並びは weight の大きい順
54 */
55export function squarify(items: readonly { key: string; weight: number }[], rect: Rect): Cell[] {
56  const list = items.filter(i => i.weight > 0).sort((a, b) => b.weight - a.weight)
57  const total = list.reduce((n, i) => n + i.weight, 0)
58  if (list.length === 0 || rect.w <= 0 || rect.h <= 0) return []
59  const scale = (rect.w * rect.h) / total
60  const areas = list.map(i => ({ key: i.key, a: i.weight * scale }))
61  const out: Cell[] = []
62  let { x, y, w, h } = rect
63
64  // 並べた時の一番細長い比 (小さいほど正方形に近い)
65  const worst = (row: { a: number }[], side: number) => {
66    const s = row.reduce((n, r) => n + r.a, 0)
67    const max = Math.max(...row.map(r => r.a))
68    const min = Math.min(...row.map(r => r.a))
69    return Math.max((side * side * max) / (s * s), (s * s) / (side * side * min))
70  }
71  // 短い辺に沿って 1 列置き、残りの四角を縮める
72  const place = (row: { key: string; a: number }[]) => {
73    const s = row.reduce((n, r) => n + r.a, 0)
74    if (w >= h) {
75      const cw = s / h
76      let yy = y
77      for (const r of row) {
78        out.push({ key: r.key, x, y: yy, w: cw, h: r.a / cw })
79        yy += r.a / cw
80      }
81      x += cw
82      w -= cw
83    } else {
84      const rh = s / w
85      let xx = x
86      for (const r of row) {
87        out.push({ key: r.key, x: xx, y, w: r.a / rh, h: rh })
88        xx += r.a / rh
89      }
90      y += rh
91      h -= rh
92    }
93  }
94
95  let row: { key: string; a: number }[] = []
96  for (const item of areas) {
97    const side = Math.min(w, h)
98    if (row.length === 0 || worst([...row, item], side) <= worst(row, side)) {
99      row.push(item)
100    } else {
101      place(row)
102      row = [item]
103    }
104  }
105  if (row.length) place(row)
106  return out
107}
108
109// ---- 描く ----
110
111const MAP_X = 12
112const MAP_Y = HEADER_H + 10
113const MAP_W = W - 24
114const MAP_H = 250
115/** フォルダの名前の帯の高さ */
116const LABEL_H = 16
117
118// 12px の文字のおおよその幅: 全角 12、半角 7
119const wide = (ch: string) => /[⺀-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]/.test(ch)
120const widthOf = (s: string) => [...s].reduce((n, ch) => n + (wide(ch) ? 12 : 7), 0)
121
122/** px に収まるように後ろを切る。3 字も入らなければ空 */
123export function fit(s: string, px: number) {
124  if (widthOf(s) <= px) return s
125  const chars = [...s]
126  let out = ''
127  for (const ch of chars) {
128    if (widthOf(`${out}${ch}…`) > px) break
129    out += ch
130  }
131  return [...out].length >= 3 ? `${out}…` : ''
132}
133
134const txt = (x: number, y: number, s: string, size: number, fill: string, extra = '') =>
135  `<text x="${x.toFixed(1)}" y="${y.toFixed(1)}" font-size="${size}" fill="${fill}"${extra ? ` ${extra}` : ''}>${esc(s)}</text>`
136
137/** 濃さ: 書いた物は 0.5〜1、読んだだけは 0.25〜0.65 */
138export const shade = (f: FileTouch, max: number) => {
139  const r = max > 0 ? countOf(f) / max : 0
140  return f.writes > 0 ? 0.5 + 0.5 * r : 0.25 + 0.4 * r
141}
142
143export type Layout = { groups: (Cell & { files: number; count: number; hasLabel: boolean })[]; cells: (Cell & { file: FileTouch })[] }
144
145/** フォルダをツリーマップで置き、その中にファイルを置く */
146export function layout(files: readonly FileTouch[], filter: FileMapFilter, rect: Rect = { x: MAP_X, y: MAP_Y, w: MAP_W, h: MAP_H }): Layout {
147  const shown = ranked(files, filter).slice(0, MAX_CELLS)
148  const byGroup = new Map<string, FileTouch[]>()
149  for (const f of shown) byGroup.set(f.group, [...(byGroup.get(f.group) ?? []), f])
150  const weights = [...byGroup].map(([key, fs]) => ({ key, weight: fs.reduce((n, f) => n + countOf(f), 0) }))
151  const out: Layout = { groups: [], cells: [] }
152  for (const g of squarify(weights, rect)) {
153    const fs = byGroup.get(g.key) ?? []
154    const hasLabel = g.h >= LABEL_H + 18 && g.w >= 40
155    const inner = hasLabel ? { x: g.x + 1, y: g.y + LABEL_H, w: g.w - 2, h: g.h - LABEL_H - 1 } : { x: g.x + 1, y: g.y + 1, w: g.w - 2, h: g.h - 2 }
156    out.groups.push({ ...g, files: fs.length, count: fs.reduce((n, f) => n + countOf(f), 0), hasLabel })
157    const byKey = new Map(fs.map(f => [f.label, f]))
158    for (const c of squarify(
159      fs.map(f => ({ key: f.label, weight: countOf(f) })),
160      inner,
161    )) {
162      const file = byKey.get(c.key)
163      if (file) out.cells.push({ ...c, file })
164    }
165  }
166  return out
167}
168
169export const summaryText = (files: readonly FileTouch[], filter: FileMapFilter) => {
170  const shown = pick(files, filter)
171  const groups = new Set(shown.map(f => f.group)).size
172  const touches = shown.reduce((n, f) => n + countOf(f), 0)
173  const written = shown.filter(f => f.writes > 0).length
174  return `${filter === 'written' ? '書いた物 ' : ''}ファイル ${shown.length} 件 フォルダ ${groups} 書いた ${written} 件 ${touches} 回`
175}
176
177export function fileMapSvg(files: readonly FileTouch[], filter: FileMapFilter): string {
178  const shown = pick(files, filter)
179  const max = Math.max(0, ...shown.map(countOf))
180  const sub = `${filter === 'written' ? '書いた物だけ ' : ''}${shown.length} 件${shown.length > MAX_CELLS ? `(上位 ${MAX_CELLS} を描く)` : ''}`
181  let body = header('ファイルの地図', sub, C.orange)
182  if (shown.length === 0) {
183    body += txt(16, MAP_Y + 20, filter === 'written' ? 'まだ書いたファイルがありません' : 'まだファイルに触っていません', 12, C.dim)
184    return frame(MAP_Y + 36, body)
185  }
186  const map = layout(files, filter)
187  map.groups.forEach((g, i) => {
188    let s = `<rect x="${g.x.toFixed(1)}" y="${g.y.toFixed(1)}" width="${g.w.toFixed(1)}" height="${g.h.toFixed(1)}" fill="${C.face}" stroke="${C.bg}" stroke-width="2"/>`
189    if (g.hasLabel) {
190      const name = fit(g.key, g.w - 8)
191      if (name) s += txt(g.x + 5, g.y + 12, name, 12, C.dim, 'font-weight="bold"')
192    }
193    for (const c of map.cells.filter(c => c.file.group === g.key)) {
194      const f = c.file
195      const op = shade(f, max)
196      s += `<rect x="${c.x.toFixed(1)}" y="${c.y.toFixed(1)}" width="${c.w.toFixed(1)}" height="${c.h.toFixed(1)}" fill="${f.writes > 0 ? C.orange : C.blue}" fill-opacity="${op.toFixed(2)}" stroke="${C.bg}" stroke-width="1"/>`
197      if (c.h >= 18) {
198        const name = fit(baseName(f.label), c.w - 8)
199        if (name) s += txt(c.x + 4, c.y + 14, name, 12, op > 0.6 ? C.bg : C.text)
200      }
201      if (f.subs > 0 && c.w >= 10 && c.h >= 10) s += `<circle cx="${(c.x + c.w - 5).toFixed(1)}" cy="${(c.y + 5).toFixed(1)}" r="2.5" fill="${C.green}"/>`
202    }
203    body += fadeIn(s, Number((i * 0.06).toFixed(2)))
204  })
205  // 凡例
206  const ly = MAP_Y + MAP_H + 12
207  const item = (x: number, swatch: string, label: string) => `<g transform="translate(${x} ${ly})">${swatch}${txt(16, 11, label, 12, C.dim)}</g>`
208  body +=
209    item(16, `<rect x="0" y="1" width="11" height="11" rx="2" fill="${C.orange}"/>`, '書いた') +
210    item(84, `<rect x="0" y="1" width="11" height="11" rx="2" fill="${C.blue}" fill-opacity="0.5"/>`, '読んだだけ') +
211    item(188, `<circle cx="5.5" cy="6.5" r="3" fill="${C.green}"/>`, 'サブも触った') +
212    txt(W - 16, ly + 11, '濃いほど多い', 12, C.dim, 'text-anchor="end"')
213  return frame(ly + 24, body)
214}
215
216/** 後ろを残して前を … にする (パスはファイル名の側が大事) */
217export const tail = (s: string, n: number) => {
218  const a = [...s]
219  return a.length > n ? `…${a.slice(-(n - 1)).join('')}` : s
220}
221
222export const topText = (f: FileTouch) =>
223  `${countOf(f)}回 ${f.writes > 0 ? `書${f.writes} ` : ''}${f.reads > 0 ? `読${f.reads} ` : ''}${tail(f.label, 40)}`
224
225export type Line = { text: string; color?: string; isDim?: boolean; isBold?: boolean }
226
227/** terminal 用: 合計とフォルダごとの回数 (多い順) */
228export function groupLines(files: readonly FileTouch[], filter: FileMapFilter): Line[] {
229  const shown = pick(files, filter)
230  const out: Line[] = [{ text: summaryText(files, filter), isBold: true }]
231  if (shown.length === 0) return [...out, { text: filter === 'written' ? 'まだ書いたファイルがありません' : 'まだファイルに触っていません', isDim: true }]
232  const groups = new Map<string, { n: number; files: number; writes: number }>()
233  for (const f of shown) {
234    const g = groups.get(f.group) ?? { n: 0, files: 0, writes: 0 }
235    groups.set(f.group, { n: g.n + countOf(f), files: g.files + 1, writes: g.writes + (f.writes > 0 ? 1 : 0) })
236  }
237  for (const [name, g] of [...groups].sort((a, b) => b[1].n - a[1].n)) {
238    out.push({ text: `${tail(name, 24)} ${g.n}回 ${g.files}件${g.writes ? ` 書いた${g.writes}` : ''}`, color: g.writes ? 'yellow' : undefined })
239  }
240  return out
241}
242

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 FileTouch = {
3  /** 作業フォルダからの相対パス (区切りは /)。外ならそのままのパス */
4  label: string
5  /** まとめる先: 上の 2 段のフォルダ。作業フォルダ直下は「直下」、外は「外」 */
6  group: string
7  /** 読んだ回数 (Read・Grep・Glob) */
8  reads: number
9  /** 書いた回数 (Edit・Write・MultiEdit・NotebookEdit) */
10  writes: number
11  /** うちサブエージェントの回数 */
12  subs: number
13  /** 最後に触った時刻 (ms) */
14  last: number
15}
16
17export type FileMapFilter = 'all' | 'written'
18
19declare module 'claude-code' {
20  interface PluginState {
21    'file-map': {
22      /** 順は問わない。上限を超えたら古く触った物から捨てる */
23      files: FileTouch[]
24      filter: FileMapFilter
25    }
26  }
27}
28