git-pane

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { GitPaneSnapshot } from '../types'
5import { paneLines, paneSvg, toRepo } from './git'
6import { followTheme, readTheme } from './style'
7
8const PANE = 'git-pane'
9const TITLE = 'git'
10const DESCRIPTION = '今の作業フォルダの git の様子(変更・行数・ブランチ・直近コミット)をペインで見る'
11const GAP = 2000
12// ファイルを変えうるツール。終わったらペインを読み直す
13const WRITERS = new Set(['Edit', 'Write', 'MultiEdit', 'NotebookEdit', 'Bash', 'PowerShell'])
14
15const SNAP = atom({ plugin: 'git-pane', key: 'snap' } as const, { kind: 'idle' })
16const NOTE = atom({ plugin: 'git-pane', key: 'note' } as const, '')
17
18const REVIEW =
19  '今の作業フォルダの git の差分(git diff と git diff --cached)を読んで、レビューしてください。' +
20  'バグ・抜け・直したほうがよい点を、ファイルと行を挙げて教えてください。'
21const COMMIT_MSG =
22  '今の git の変更(ステージ済みと未ステージ)を読んで、コミットメッセージを考えてください。' +
23  '1 行目は短い要約、空行のあとに中身を箇条書きで。コミットはまだしないでください。'
24
25// git を読むだけ。書き込む操作 (commit・add・stash など) は呼ばない。
26// GIT_OPTIONAL_LOCKS=0: status が読むついでに index を書き直さない (Claude の git add/commit と index.lock でぶつからない)。
27// core.fsmonitor=false・log.showSignature=false: リポジトリの設定が指すコマンド (fsmonitor・gpg.program) を走らせない。
28// ponytail: filter.<name>.clean は止める -c が無い (status・diff-files が作業ツリーを読む時に走りうる)。mod-guide の限界に書く
29const git = ($: EngineInterface, cwd: string, args: string[]) =>
30  $.process.run(['git', '-c', 'core.quotePath=false', '-c', 'core.fsmonitor=false', '-c', 'log.showSignature=false', ...args], {
31    cwd,
32    env: { GIT_OPTIONAL_LOCKS: '0' },
33    timeoutMs: 15_000,
34  })
35
36// ponytail: 主の名前を持てたかはモジュール変数。リロードでも session.start が来て決め直す
37let ownsMain = false
38
39async function load($: EngineInterface) {
40  const cwd = await $.session.cwd()
41  let snap: GitPaneSnapshot
42  try {
43    const inside = await git($, cwd, ['rev-parse', '--is-inside-work-tree'])
44    if (inside.exitCode !== 0 && /dubious ownership/.test(inside.stderr)) snap = { kind: 'unsafe', cwd }
45    else if (inside.exitCode !== 0 || inside.stdout.trim() !== 'true') snap = { kind: 'not-repo', cwd }
46    else {
47      const [st, un, ca, lg] = await Promise.all([
48        git($, cwd, ['status', '--porcelain=v1', '-b', '--no-renames']),
49        // 作業ツリーと index の比べ。git diff は GIT_OPTIONAL_LOCKS を見ずに index を書き直すので diff-files にする
50        git($, cwd, ['diff-files', '--numstat', '--no-renames']),
51        git($, cwd, ['diff', '--cached', '--numstat', '--no-renames']),
52        // 題を最後に置く (題にタブがあっても崩れない)。コミットが無いと失敗するので空として読む
53        git($, cwd, ['log', '-8', '--format=%h%x09%ct%x09%s']),
54      ])
55      if (st.exitCode !== 0) throw new Error(st.stderr.trim() || 'git status が失敗しました')
56      const at = await $.clock.now()
57      snap = { kind: 'repo', cwd, loadedAt: at, ...toRepo(st.stdout, un.stdout, ca.stdout, lg.exitCode === 0 ? lg.stdout : '') }
58    }
59  } catch (err) {
60    snap = { kind: 'error', cwd, message: err instanceof Error ? err.message : String(err) }
61  }
62  await update($, SNAP, () => snap)
63}
64
65const isOpen = async ($: EngineInterface) => (await $.ui.panes()).some(p => p.id === PANE)
66
67async function fill($: EngineInterface, text: string) {
68  const isFilled = await $.prompt.fill({ text, mode: 'insert' }).then(
69    r => r.isFilled,
70    () => false,
71  )
72  await update($, NOTE, () => (isFilled ? '入力欄に入れました(送信はしていません)' : '入力欄に入れられませんでした'))
73}
74
75const clockLabel = (ms: number) => {
76  const d = new Date(ms)
77  return [d.getHours(), d.getMinutes(), d.getSeconds()].map(n => String(n).padStart(2, '0')).join(':')
78}
79
80// ponytail: 間引きの印はモジュール変数。リロードで消えても 1 回多く読むだけ
81let lastAuto = 0
82let isPending = false
83
84// ツールが終わるたびに呼ばれる。2 秒に 1 回まで、間の分は最後に 1 回まとめて読む
85async function schedule($: EngineInterface) {
86  if (isPending) return
87  isPending = true
88  const wait = Math.max(1, lastAuto + GAP - (await $.clock.now()))
89  $.clock.after(wait, () => {
90    void (async () => {
91      isPending = false
92      if (!(await isOpen($))) return
93      lastAuto = await $.clock.now()
94      await load($)
95    })().catch(() => {})
96  })
97}
98
99const reload = async ($: EngineInterface) => {
100  await update($, NOTE, () => '')
101  await load($)
102}
103
104const openPane = async ($: EngineInterface) => {
105  await reload($)
106  await $.ui.open({ id: PANE, title: TITLE })
107  return { text: 'git のペインを開きました。' }
108}
109
110export const register: Register = on => {
111  followTheme(on)
112  on('session.start', async ($, e, next) => {
113    const started = await next(e)
114    await readTheme($)
115    // /git が組み込みと被って拒まれたら /gitpane にする
116    const got = await $.command.register({ name: 'git', description: DESCRIPTION }).catch(() => undefined)
117    ownsMain = got?.command === 'git'
118    if (!ownsMain) await $.command.register({ name: 'gitpane', description: DESCRIPTION }).catch(() => {})
119    if (await isOpen($)) void load($).catch(() => {})
120    return started
121  })
122
123  // /git を持てなかった時は、その名前の持ち主 (組み込みなど) に回す
124  on('command.run', { command: 'git' }, ($, e, next) => (ownsMain ? openPane($) : next(e))).catch(($, e, next) => next(e))
125  // /git を持てた時は /gitpane を登録していないので、同じ名前の別のコマンドに回す
126  on('command.run', { command: 'gitpane' }, ($, e, next) => (ownsMain ? next(e) : openPane($)))
127
128  on('tool.call', async ($, e, next) => {
129    const ran = await next(e)
130    if (WRITERS.has(String(e.tool))) void schedule($).catch(() => {})
131    return ran
132  }).catch(($, e, next) => next(e))
133
134  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
135    const t = $.ui.resolve(e)
136    const { Box, Text, Button } = t
137    // terminal の表にも Svg の名前があるので、画面の種類でも分ける
138    const Svg = e.surface !== 'terminal' && 'Svg' in t ? t.Svg : undefined
139    const snap = await read($, SNAP)
140    const note = await read($, NOTE)
141    const now = await $.clock.now()
142    const lines = paneLines(snap, now)
143
144    return (
145      <Box flexDirection="column" gap={1}>
146        {Svg ? (
147          <Svg source={paneSvg(snap, now)} alt={lines.map(l => l.text).join('\n')} />
148        ) : (
149          <Box key="lines" flexDirection="column">
150            {lines.map(l => (
151              <Text color={l.color} dimColor={l.isDim} bold={l.isBold}>
152                {l.text}
153              </Text>
154            ))}
155          </Box>
156        )}
157        <Box flexDirection="column">
158          <Button key="reload" label="再読込" variant="primary" onPress={() => void reload($)} />
159          <Button key="review" dimColor label="差分をレビューして" onPress={() => void fill($, REVIEW)} />
160          <Button key="commit-msg" dimColor label="コミットメッセージを考えて" onPress={() => void fill($, COMMIT_MSG)} />
161        </Box>
162        {note !== '' && <Text dimColor>{note}</Text>}
163        {snap.kind === 'repo' && <Text dimColor>{`読込 ${clockLabel(snap.loadedAt)}`}</Text>}
164      </Box>
165    )
166  })
167}
168

1// git の出力を表示用のデータに変え、SVG と terminal 用の行を組む。どれも純関数
2import type { GitPaneCommit, GitPaneFile, GitPaneSnapshot } from '../types'
3import { C, HEADER_H, countUp, fadeIn, frame, header } from './style'
4
5type Repo = Extract<GitPaneSnapshot, { kind: 'repo' }>
6
7export const TOP = 12
8const MID = 190
9const HALF = 170
10const MONO = 'ui-monospace, Consolas, monospace'
11
12/** 制御文字を落とす (タブと改行は残す)。エンジンは制御文字を含む Text・alt を描かない */
13export const plain = (s: string) => s.replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, '')
14
15// core.quotePath=false でも " や \ や制御文字を含む名前は C の文字列の形で囲まれる。
16// 戻すと \b などが本物の制御文字になるので、表示用に落とす
17const unquote = (s: string) => plain(rawUnquote(s))
18const rawUnquote = (s: string) => {
19  if (!(s.length > 1 && s.startsWith('"') && s.endsWith('"'))) return s
20  try {
21    return JSON.parse(s) as string
22  } catch {
23    return s.slice(1, -1)
24  }
25}
26
27function parseHead(line: string) {
28  let s = line.slice(3)
29  let ahead = 0
30  let behind = 0
31  const m = /\s\[([^\]]*)\]$/.exec(s)
32  if (m) {
33    s = s.slice(0, m.index)
34    ahead = Number(/ahead (\d+)/.exec(m[1] ?? '')?.[1] ?? 0)
35    behind = Number(/behind (\d+)/.exec(m[1] ?? '')?.[1] ?? 0)
36  }
37  const fresh = /^(?:No commits yet on|Initial commit on) (.+)$/.exec(s)
38  if (fresh) return { branch: plain(fresh[1] ?? ''), upstream: '', ahead, behind }
39  if (s.startsWith('HEAD (no branch)')) return { branch: '(切り離し HEAD)', upstream: '', ahead, behind }
40  const [branch = '', upstream = ''] = s.split('...')
41  return { branch: plain(branch), upstream: plain(upstream), ahead, behind }
42}
43
44/**
45 * `git status --porcelain=v1 -b`・`git diff --numstat`(未ステージ)・`git diff --cached --numstat`・
46 * `git log --format=%h%x09%ct%x09%s` の出力から表示用のデータを作る (どれも --no-renames 前提)
47 */
48export function toRepo(status: string, unstaged: string, staged: string, log: string): Omit<Repo, 'kind' | 'cwd' | 'loadedAt'> {
49  let head = { branch: '', upstream: '', ahead: 0, behind: 0 }
50  const map = new Map<string, GitPaneFile>()
51  const get = (path: string) => {
52    let f = map.get(path)
53    if (!f) map.set(path, (f = { path, add: 0, del: 0, isStaged: false, isUnstaged: false, isUntracked: false, isBinary: false }))
54    return f
55  }
56  for (const line of status.split(/\r?\n/)) {
57    if (line.startsWith('## ')) head = parseHead(line)
58    else if (line.length > 3) {
59      const x = line[0]
60      const y = line[1]
61      const f = get(unquote(line.slice(3)))
62      if (x === '?' || x === '!') f.isUntracked = true
63      else {
64        f.isStaged = x !== ' '
65        f.isUnstaged = y !== ' '
66      }
67    }
68  }
69  for (const out of [unstaged, staged]) {
70    for (const line of out.split(/\r?\n/)) {
71      const [a, d, ...rest] = line.split('\t')
72      if (rest.length === 0) continue
73      const f = get(unquote(rest.join('\t')))
74      if (a === '-' || d === '-') f.isBinary = true
75      else {
76        f.add += Number(a) || 0
77        f.del += Number(d) || 0
78      }
79    }
80  }
81  const files = [...map.values()].sort((p, q) => q.add + q.del - (p.add + p.del) || p.path.localeCompare(q.path))
82  const commits: GitPaneCommit[] = []
83  for (const line of log.split(/\r?\n/)) {
84    const [hash, ct, ...subject] = line.split('\t')
85    if (hash && ct) commits.push({ hash, time: Number(ct) * 1000, subject: plain(subject.join('\t')) })
86  }
87  return { ...head, files, commits }
88}
89
90/** 何分前の形 */
91export function ago(ms: number, now: number) {
92  const s = Math.max(0, Math.floor((now - ms) / 1000))
93  if (s < 60) return 'たった今'
94  if (s < 3600) return `${Math.floor(s / 60)}分前`
95  if (s < 86400) return `${Math.floor(s / 3600)}時間前`
96  if (s < 86400 * 30) return `${Math.floor(s / 86400)}日前`
97  if (s < 86400 * 365) return `${Math.floor(s / (86400 * 30))}か月前`
98  return `${Math.floor(s / (86400 * 365))}年前`
99}
100
101// 全角は 2、半角は 1 と数えた幅
102const wide = (ch: string) => /[⺀-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]/.test(ch)
103const units = (s: string) => [...s].reduce((n, ch) => n + (wide(ch) ? 2 : 1), 0)
104
105/** 幅に収まらなければ末尾を残して頭を … にする */
106export function tailFit(s: string, max: number) {
107  if (units(s) <= max) return s
108  const chars = [...s]
109  let out = ''
110  let n = 1
111  for (let i = chars.length - 1; i >= 0; i--) {
112    const ch = chars[i] ?? ''
113    n += wide(ch) ? 2 : 1
114    if (n > max) break
115    out = ch + out
116  }
117  return `…${out}`
118}
119
120/** 幅に収まらなければ頭を残して末尾を … にする */
121export function headFit(s: string, max: number) {
122  if (units(s) <= max) return s
123  let out = ''
124  let n = 1
125  for (const ch of s) {
126    n += wide(ch) ? 2 : 1
127    if (n > max) break
128    out += ch
129  }
130  return `${out}…`
131}
132
133const esc = (s: string) => plain(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
134const base = (p: string) => p.replace(/[\\/]+$/, '').split(/[\\/]/).pop() || p
135const sum = (r: Repo) => ({
136  files: r.files.length,
137  add: r.files.reduce((n, f) => n + f.add, 0),
138  del: r.files.reduce((n, f) => n + f.del, 0),
139})
140
141/** 共通の見出し帯の下に body を置く(body は見出しを除いた座標で書く) */
142const svgDoc = (h: number, body: string, sub = '', accent = C.orange) =>
143  frame(h + HEADER_H, header('git', sub, accent) + `<g transform="translate(0 ${HEADER_H})">${body}</g>`)
144
145function messageSvg(title: string, color: string, sub: string, hint: string) {
146  return svgDoc(
147    120,
148    `<rect x="8" y="8" width="364" height="104" rx="8" fill="${C.face}" stroke="${C.line}"/>` +
149      `<circle cx="34" cy="40" r="12" fill="none" stroke="${color}" stroke-width="2"/>` +
150      `<line x1="34" y1="34" x2="34" y2="41" stroke="${color}" stroke-width="2" stroke-linecap="round"/>` +
151      `<circle cx="34" cy="46" r="1.5" fill="${color}"/>` +
152      `<text x="56" y="45" font-size="15" font-weight="bold" fill="${color}">${esc(title)}</text>` +
153      `<text x="20" y="76" font-size="12" fill="${C.dim}">${esc(tailFit(sub, 52))}</text>` +
154      `<text x="20" y="98" font-size="12" fill="${C.dim}">${esc(headFit(hint, 52))}</text>`,
155    '',
156    color,
157  )
158}
159
160const UNSAFE = 'git が所有者の確認で止めました'
161const UNSAFE_HINT = 'git config の safe.directory に入れると読めます'
162
163/** ペインに出す SVG 1 枚 */
164export function paneSvg(snap: GitPaneSnapshot, now: number) {
165  if (snap.kind === 'idle') return messageSvg('読み込み中', C.blue, '', '「再読込」で git の様子を読みます')
166  if (snap.kind === 'not-repo') return messageSvg('git のフォルダではありません', C.yellow, snap.cwd, 'git のリポジトリの中で開くと表示されます')
167  if (snap.kind === 'unsafe') return messageSvg(UNSAFE, C.yellow, snap.cwd, UNSAFE_HINT)
168  if (snap.kind === 'error') return messageSvg('git を実行できません', C.red, snap.message, 'git が入っているか確かめてください')
169
170  const t = sum(snap)
171  let s = ''
172  // ── ヘッダー: ブランチ・ahead/behind・3 つのタイル
173  s += `<rect x="8" y="8" width="364" height="128" rx="8" fill="${C.face}" stroke="${C.line}"/>`
174  s +=
175    `<g stroke="${C.dim}" stroke-width="2" fill="none" stroke-linecap="round">` +
176    `<line x1="22" y1="22" x2="22" y2="38"/><path d="M32 25 C32 32 22 30 22 36"/>` +
177    `<circle cx="22" cy="21" r="2.6" fill="${C.face}"/><circle cx="22" cy="40" r="2.6" fill="${C.face}"/><circle cx="32" cy="23" r="2.6" fill="${C.face}"/></g>`
178  s += `<text x="42" y="37" font-size="17" font-weight="bold" fill="${C.text}">${esc(headFit(snap.branch, 22))}</text>`
179  if (snap.upstream) {
180    s +=
181      `<text x="364" y="37" font-size="15" font-weight="bold" text-anchor="end">` +
182      `<tspan fill="${snap.ahead ? C.green : C.dim}">↑${snap.ahead}</tspan>` +
183      `<tspan dx="8" fill="${snap.behind ? C.orange : C.dim}">↓${snap.behind}</tspan></text>`
184  } else s += `<text x="364" y="36" font-size="12" fill="${C.dim}" text-anchor="end">上流なし</text>`
185  const where = snap.upstream ? `上流  ${snap.upstream}` : '上流の設定はありません'
186  s += `<text x="20" y="58" font-size="12" fill="${C.dim}">${esc(tailFit(where, 52))}</text>`
187  const tiles: [string, number, string, (n: number) => string][] = [
188    ['変更ファイル', t.files, C.blue, n => String(n)],
189    ['追加した行', t.add, C.green, n => `+${n}`],
190    ['消した行', t.del, C.red, n => `−${n}`],
191  ]
192  tiles.forEach(([label, value, color, format], i) => {
193    const x = 16 + i * 119
194    const size = format(value).length > 6 ? 20 : 26
195    s +=
196      `<rect x="${x}" y="70" width="110" height="58" rx="6" fill="${C.bg}" stroke="${C.line}"/>` +
197      `<rect x="${x}" y="70" width="3" height="58" rx="1.5" fill="${color}"/>` +
198      `<text x="${x + 12}" y="87" font-size="12" fill="${C.dim}">${label}</text>` +
199      countUp(value, `x="${x + 12}" y="118" font-size="${size}" font-weight="bold" fill="${color}"`, format, i * 0.1)
200  })
201
202  // ── ファイルごとの差分バー
203  let y = 164
204  s += `<text x="12" y="${y}" font-size="13" font-weight="bold" fill="${C.text}">ファイルごとの変更</text>`
205  if (t.files > 0) s += `<text x="368" y="${y}" font-size="12" fill="${C.dim}" text-anchor="end">${Math.min(TOP, t.files)} / ${t.files}</text>`
206  y += 20
207  s +=
208    `<g font-size="12" fill="${C.dim}">` +
209    `<circle cx="16" cy="${y - 4}" r="4" fill="${C.blue}"/><text x="24" y="${y}">ステージ済</text>` +
210    `<circle cx="104" cy="${y - 4}" r="4" fill="${C.yellow}"/><text x="112" y="${y}">未ステージ</text>` +
211    `<circle cx="192" cy="${y - 4}" r="3.5" fill="none" stroke="${C.purple}" stroke-width="1.5"/><text x="200" y="${y}">未追跡</text></g>`
212  y += 12
213  const top = snap.files.slice(0, TOP)
214  if (top.length === 0) {
215    s +=
216      `<rect x="8" y="${y}" width="364" height="40" rx="6" fill="${C.face}" stroke="${C.line}"/>` +
217      `<text x="190" y="${y + 25}" font-size="13" fill="${C.green}" text-anchor="middle">変更はありません</text>`
218    y += 52
219  } else {
220    const max = Math.max(1, ...top.map(f => Math.max(f.add, f.del)))
221    s += `<line x1="${MID}" y1="${y}" x2="${MID}" y2="${y + top.length * 34}" stroke="${C.line}" stroke-dasharray="2 3"/>`
222    for (const f of top) {
223      const dots = f.isUntracked
224        ? `<circle cx="14" cy="${y + 8}" r="3.5" fill="none" stroke="${C.purple}" stroke-width="1.5"/>`
225        : (f.isStaged ? `<circle cx="${f.isUnstaged ? 11 : 14}" cy="${y + 8}" r="4" fill="${C.blue}"/>` : '') +
226          (f.isUnstaged ? `<circle cx="${f.isStaged ? 20 : 14}" cy="${y + 8}" r="4" fill="${C.yellow}"/>` : '')
227      const count = f.isUntracked
228        ? `<tspan fill="${C.purple}">新規</tspan>`
229        : f.isBinary && f.add + f.del === 0
230          ? `<tspan fill="${C.dim}">バイナリ</tspan>`
231          : `<tspan fill="${C.green}">+${f.add}</tspan><tspan dx="6" fill="${C.red}">−${f.del}</tspan>`
232      s +=
233        dots +
234        `<text x="30" y="${y + 12}" font-size="12" fill="${f.isUntracked ? C.purple : C.text}">${esc(tailFit(f.path, 38))}</text>` +
235        `<text x="368" y="${y + 12}" font-size="12" text-anchor="end">${count}</text>` +
236        `<rect x="16" y="${y + 18}" width="348" height="8" rx="4" fill="${C.face}"/>`
237      const wl = f.del ? Math.max(2, (f.del / max) * HALF) : 0
238      const wr = f.add ? Math.max(2, (f.add / max) * HALF) : 0
239      const grow = (from: number, to: number, attr: string) =>
240        `<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"/>`
241      if (wl) s += `<rect x="${MID - wl}" y="${y + 18}" width="${wl}" height="8" rx="2" fill="${C.red}">${grow(MID, MID - wl, 'x')}${grow(0, wl, 'width')}</rect>`
242      if (wr) s += `<rect x="${MID}" y="${y + 18}" width="${wr}" height="8" rx="2" fill="${C.green}">${grow(0, wr, 'width')}</rect>`
243      y += 34
244    }
245    if (t.files > TOP) {
246      s += `<text x="30" y="${y + 6}" font-size="12" fill="${C.dim}">ほか ${t.files - TOP} ファイル</text>`
247      y += 16
248    }
249    y += 8
250  }
251
252  // ── 直近コミットのタイムライン
253  y += 16
254  s += `<text x="12" y="${y}" font-size="13" font-weight="bold" fill="${C.text}">直近のコミット</text>`
255  y += 14
256  if (snap.commits.length === 0) {
257    s += `<text x="12" y="${y + 14}" font-size="12" fill="${C.dim}">まだコミットがありません</text>`
258    y += 28
259  } else {
260    const n = snap.commits.length
261    if (n > 1) s += `<line x1="20" y1="${y + 8}" x2="20" y2="${y + 8 + (n - 1) * 40}" stroke="${C.line}" stroke-width="2"/>`
262    snap.commits.forEach((c, i) => {
263      s += fadeIn(
264        (i === 0
265          ? `<circle cx="20" cy="${y + 8}" r="5.5" fill="${C.blue}"/>`
266          : `<circle cx="20" cy="${y + 8}" r="4.5" fill="${C.bg}" stroke="${C.blue}" stroke-width="2"/>`) +
267        `<text x="34" y="${y + 12}" font-size="12" font-family="${MONO}" fill="${C.blue}">${esc(c.hash)}</text>` +
268        `<text x="368" y="${y + 12}" font-size="12" fill="${C.dim}" text-anchor="end">${ago(c.time, now)}</text>` +
269        `<text x="34" y="${y + 29}" font-size="13" fill="${C.text}">${esc(headFit(c.subject, 44))}</text>`,
270        0.3 + i * 0.08,
271      )
272      y += 40
273    })
274  }
275  return svgDoc(y + 8, s, base(snap.cwd))
276}
277
278type Line = { text: string; color?: string; isDim?: boolean; isBold?: boolean }
279
280/** Svg の alt と terminal で使う文の行。制御文字を落とす (タブと改行は空白に) */
281export const paneLines = (snap: GitPaneSnapshot, now: number): Line[] =>
282  rawLines(snap, now).map(l => ({ ...l, text: plain(l.text).replace(/[\t\r\n]/g, ' ') }))
283
284function rawLines(snap: GitPaneSnapshot, now: number): Line[] {
285  if (snap.kind === 'idle') return [{ text: '読み込み中', isDim: true }]
286  if (snap.kind === 'not-repo') return [{ text: 'git のフォルダではありません', color: 'yellow' }, { text: snap.cwd, isDim: true }]
287  if (snap.kind === 'unsafe') return [{ text: UNSAFE, color: 'yellow' }, { text: snap.cwd, isDim: true }, { text: UNSAFE_HINT, isDim: true }]
288  if (snap.kind === 'error') return [{ text: `git を実行できません: ${snap.message}`, color: 'red' }]
289  const t = sum(snap)
290  const lines: Line[] = [
291    { text: `ブランチ ${snap.branch}${snap.upstream ? ` ↑${snap.ahead} ↓${snap.behind}` : ' (上流なし)'}`, isBold: true },
292    { text: `変更 ${t.files} ファイル +${t.add} -${t.del}` },
293  ]
294  if (t.files === 0) lines.push({ text: '変更はありません', color: 'green' })
295  for (const f of snap.files.slice(0, TOP)) {
296    const mark = f.isUntracked ? '?' : `${f.isStaged ? 'S' : ' '}${f.isUnstaged ? 'M' : ' '}`
297    const count = f.isUntracked ? '新規' : f.isBinary && f.add + f.del === 0 ? 'バイナリ' : `+${f.add} -${f.del}`
298    lines.push({ text: `${mark.padEnd(2)} ${count}  ${f.path}` })
299  }
300  if (t.files > TOP) lines.push({ text: `ほか ${t.files - TOP} ファイル`, isDim: true })
301  lines.push({ text: '直近のコミット', isBold: true })
302  if (snap.commits.length === 0) lines.push({ text: 'まだコミットがありません', isDim: true })
303  for (const c of snap.commits) lines.push({ text: `${c.hash} ${c.subject} (${ago(c.time, now)})` })
304  return lines
305}
306

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 GitPaneFile = {
3  path: string
4  add: number
5  del: number
6  isStaged: boolean
7  isUnstaged: boolean
8  isUntracked: boolean
9  isBinary: boolean
10}
11
12export type GitPaneCommit = { hash: string; subject: string; /** コミット時刻 (ms) */ time: number }
13
14export type GitPaneSnapshot =
15  | { kind: 'idle' }
16  | { kind: 'not-repo'; cwd: string }
17  /** git が所有者の確認 (safe.directory) で止めた */
18  | { kind: 'unsafe'; cwd: string }
19  | { kind: 'error'; cwd: string; message: string }
20  | {
21      kind: 'repo'
22      cwd: string
23      branch: string
24      upstream: string
25      ahead: number
26      behind: number
27      /** 行数の多い順 */
28      files: GitPaneFile[]
29      commits: GitPaneCommit[]
30      loadedAt: number
31    }
32
33declare module 'claude-code' {
34  interface PluginState {
35    'git-pane': {
36      snap: GitPaneSnapshot
37      /** ボタンの結果などの一言。空なら出さない */
38      note: string
39    }
40  }
41}
42