ci-pane

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, ProcessRunResult, Register } from 'claude-code'
3
4import type { CiSnap } from '../types'
5import {
6  DETACHED,
7  NO_PR,
8  PR_FIELDS,
9  RUN_FIELDS,
10  RUN_LIMIT,
11  classify,
12  clean,
13  cut,
14  firstLine,
15  isRunning,
16  missingOrError,
17  parsePr,
18  parseRuns,
19  prLines,
20  prSvg,
21  runLines,
22  runsSvg,
23  stateLabel,
24} from './ci'
25import { followTheme, readTheme } from './style'
26
27const PANE = 'ci-pane'
28const TITLE = 'CI'
29const DESCRIPTION = '今のブランチの PR とチェック、GitHub Actions の結果をペインで見る (読むだけ)'
30/** タイマーの刻み。走っている物がある時はこの間隔、無い時は SLOW_MS ごとに読む */
31const FAST_MS = 20_000
32const SLOW_MS = 60_000
33
34const SNAP = atom({ plugin: 'ci-pane', key: 'snap' } as const, { kind: 'idle' })
35const LOADING = atom({ plugin: 'ci-pane', key: 'isLoading' } as const, false)
36
37type $ = EngineInterface
38type Ran = { ok: true; r: ProcessRunResult } | { ok: false; message: string }
39
40// ponytail: 主の名前を持てたか・最後に読んだ時刻・連番はモジュール変数。リロードでも session.start が来て決め直す
41let ownsMain = false
42let lastLoad = 0
43let seq = 0
44
45// 読むだけ。再実行・マージなど何かを起こす操作は呼ばない
46const run = async ($: $, cwd: string, argv: string[]): Promise<Ran> => {
47  try {
48    // GIT_OPTIONAL_LOCKS=0: git が読むついでに index を書き直さない (gh の中で走る git にも効く)
49    return { ok: true, r: await $.process.run(argv, { cwd, env: { GIT_OPTIONAL_LOCKS: '0', GH_PROMPT_DISABLED: '1', NO_COLOR: '1' }, timeoutMs: 30_000 }) }
50  } catch (err) {
51    return { ok: false, message: clean(err instanceof Error ? err.message : String(err)) }
52  }
53}
54
55async function readCi($: $): Promise<CiSnap> {
56  const cwd = await $.session.cwd()
57  const head = await run($, cwd, ['git', '-c', 'core.fsmonitor=false', 'rev-parse', '--abbrev-ref', 'HEAD'])
58  if (!head.ok) return { kind: 'problem', problem: 'error', detail: `git を実行できません: ${head.message}` }
59  if (head.r.exitCode !== 0) {
60    const why = classify(head.r.stderr)
61    return { kind: 'problem', problem: why === 'unsafe' ? 'unsafe' : 'not-git', detail: firstLine(head.r.stderr) }
62  }
63  const raw = head.r.stdout.trim()
64  const branch = raw === 'HEAD' ? '' : raw
65
66  const [pr, runs] = await Promise.all([
67    branch === '' ? undefined : run($, cwd, ['gh', 'pr', 'view', '--json', PR_FIELDS]),
68    run($, cwd, ['gh', 'run', 'list', ...(branch === '' ? [] : ['--branch', branch]), '--limit', String(RUN_LIMIT), '--json', RUN_FIELDS]),
69  ])
70  // gh が起動できない・ログインしていない・GitHub でない、は画面全体の問題として出す
71  for (const x of [pr, runs]) {
72    if (!x) continue
73    if (!x.ok) return { kind: 'problem', problem: missingOrError(x.message), detail: x.message }
74    if (x.r.exitCode === 0) continue
75    const why = classify(x.r.stderr)
76    if (why !== 'no-pr' && why !== 'other') return { kind: 'problem', problem: why, detail: firstLine(x.r.stderr) }
77  }
78
79  const snap: Extract<CiSnap, { kind: 'ok' }> = { kind: 'ok', branch, prNote: '', runs: [], runsNote: '', loadedAt: await $.clock.now() }
80  if (!pr) snap.prNote = DETACHED
81  else if (pr.ok && pr.r.exitCode === 0) {
82    try {
83      snap.pr = parsePr(pr.r.stdout)
84    } catch (err) {
85      snap.prNote = `PR を読めませんでした: ${clean(err instanceof Error ? err.message : String(err))}`
86    }
87  } else if (pr.ok) snap.prNote = classify(pr.r.stderr) === 'no-pr' ? NO_PR : `PR を読めませんでした: ${firstLine(pr.r.stderr)}`
88  if (runs.ok && runs.r.exitCode === 0) {
89    try {
90      snap.runs = parseRuns(runs.r.stdout)
91    } catch (err) {
92      snap.runsNote = `Actions を読めませんでした: ${clean(err instanceof Error ? err.message : String(err))}`
93    }
94  } else if (runs.ok) snap.runsNote = `Actions を読めませんでした: ${firstLine(runs.r.stderr)}`
95  return snap
96}
97
98async function load($: $) {
99  const my = ++seq
100  lastLoad = await $.clock.now()
101  await update($, LOADING, () => true)
102  const snap = await readCi($).catch((err: unknown): CiSnap => ({ kind: 'problem', problem: 'error', detail: clean(err instanceof Error ? err.message : String(err)) }))
103  if (my !== seq) return
104  await update($, SNAP, () => snap)
105  await update($, LOADING, () => false)
106}
107
108const isOpen = async ($: $) => (await $.ui.panes().catch(() => [])).some(p => p.id === PANE)
109
110const openPane = async ($: $) => {
111  void load($).catch(() => {})
112  await $.ui.open({ id: PANE, title: TITLE })
113  return { text: 'CI のペインを開きました。' }
114}
115
116export const register: Register = on => {
117  followTheme(on)
118  on('session.start', async ($, e, next) => {
119    const started = await next(e)
120    await readTheme($)
121    // /ci が拒まれたら /ci-pane にする
122    const got = await $.command.register({ name: 'ci', description: DESCRIPTION }).catch(() => undefined)
123    ownsMain = got?.command === 'ci'
124    if (!ownsMain) await $.command.register({ name: 'ci-pane', description: DESCRIPTION }).catch(() => {})
125    lastLoad = 0
126    // 開いている間だけ読む。走っている物があれば 20 秒、無ければ 60 秒ごと
127    $.clock.every(FAST_MS, async () => {
128      if (!(await isOpen($))) return
129      const wait = isRunning(await read($, SNAP)) ? FAST_MS : SLOW_MS
130      if ((await $.clock.now()) - lastLoad >= wait - 1000) await load($)
131    })
132    if (await isOpen($)) void load($).catch(() => {})
133    return started
134  })
135
136  // /ci を持てなかった時は、その名前の持ち主に回す
137  on('command.run', { command: 'ci' }, ($, e, next) => (ownsMain ? openPane($) : next(e))).catch(($, e, next) => next(e))
138  on('command.run', { command: 'ci-pane' }, openPane)
139
140  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
141    const t = $.ui.resolve(e)
142    const { Box, Text, Button, Link } = t
143    // terminal の表にも Svg の名前があるので、画面の種類でも分ける
144    const Svg = e.surface !== 'terminal' && 'Svg' in t ? t.Svg : undefined
145    const snap = await read($, SNAP)
146    const isLoading = await read($, LOADING)
147    const top = prLines(snap)
148    const lines = (key: string, ls: ReturnType<typeof prLines>) => (
149      <Box key={key} flexDirection="column">
150        {ls.map(l => (
151          <Text color={l.color} dimColor={l.isDim} bold={l.isBold}>
152            {l.text}
153          </Text>
154        ))}
155      </Box>
156    )
157
158    return (
159      <Box flexDirection="column" gap={1}>
160        {Svg ? <Svg key="pr" source={prSvg(snap)} alt={top.map(l => l.text).join('\n')} /> : lines('pr-lines', top)}
161        {snap.kind === 'ok' && snap.pr?.url && (
162          <Link key="pr-link" href={snap.pr.url} label={`PR #${snap.pr.number} (${stateLabel(snap.pr)}) を GitHub で開く`} />
163        )}
164        {snap.kind === 'ok' &&
165          (Svg ? (
166            <Svg key="runs" source={runsSvg(snap)} alt={runLines(snap).map(l => l.text).join('\n')} />
167          ) : (
168            lines('run-lines', [{ text: 'Actions', isBold: true }, ...runLines(snap)])
169          ))}
170        {snap.kind === 'ok' && snap.runs.some(r => r.url !== '') && (
171          <Box key="run-links" flexDirection="column">
172            {snap.runs
173              .slice(0, RUN_LIMIT)
174              .filter(r => r.url !== '')
175              .map((r, i) => (
176                <Link key={`run-${i}`} href={r.url} label={`${cut(r.name, 24)} ${r.label}`} />
177              ))}
178          </Box>
179        )}
180        <Button key="reload" label={isLoading ? '読み込み中' : '読み直す'} variant="primary" onPress={() => void load($).catch(() => {})} />
181      </Box>
182    )
183  })
184}
185

1// gh の出力を読み、ペインの SVG と terminal 用の行を組む。どれも純関数
2import type { CiCheck, CiKind, CiPr, CiProblem, CiRun, CiSnap } from '../types'
3import { C, HEADER_H, fadeIn, frame, header } from './style'
4
5export const PR_FIELDS = 'number,title,state,isDraft,url,reviewDecision,statusCheckRollup'
6export const RUN_FIELDS = 'databaseId,name,status,conclusion,url,createdAt,event,headSha'
7export const RUN_LIMIT = 8
8
9const ANSI = /\u001b\[[0-9;?]*[ -/]*[@-~]/g
10const CTRL = /[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g
11/** 1 行にする: 制御文字を落とし、タブ・改行は空白に */
12export const clean = (s: unknown) =>
13  String(s ?? '')
14    .replace(ANSI, '')
15    .replace(/[\t\r\n]+/g, ' ')
16    .replace(CTRL, '')
17    .trim()
18const str = (v: unknown) => (typeof v === 'string' ? clean(v) : '')
19/** https の URL だけ通す */
20export const httpsOnly = (v: unknown) => (typeof v === 'string' && /^https:\/\/[^\s]+$/.test(v) && v.length <= 2000 ? v : '')
21
22/** 標準エラーの 1 行目 (画面に出す時) */
23export const firstLine = (s: string) => clean(s.split(/\r?\n/).find(l => l.trim() !== '') ?? '').slice(0, 200)
24
25export type GhFail = CiProblem | 'no-pr' | 'other'
26
27/** gh・git の失敗を、標準エラーの文で分ける。順番が大事 (GitHub でない時の文にも gh auth login が出る) */
28export function classify(stderr: string): GhFail {
29  if (/dubious ownership/i.test(stderr)) return 'unsafe'
30  if (/not a git repository/i.test(stderr)) return 'not-git'
31  if (/no git remotes found|none of the git remotes|known GitHub host|determine base repo/i.test(stderr)) return 'not-github'
32  if (/no pull requests found/i.test(stderr)) return 'no-pr'
33  if (/gh auth login|GH_TOKEN|not logged in|authentication|HTTP 401|bad credentials/i.test(stderr)) return 'no-login'
34  return 'other'
35}
36
37/** 起動できなかった (例外) 時の理由。見つからないなら gh が無い */
38export const missingOrError = (message: string): CiProblem => (/ENOENT|not found|cannot find|no such file/i.test(message) ? 'no-gh' : 'error')
39
40export const PROBLEM_TEXT: Record<CiProblem, string> = {
41  'no-gh': 'gh (GitHub CLI) が見つかりません。入れてから「読み直す」を押してください',
42  'no-login': 'gh にログインしていません。ターミナルで gh auth login を実行してください',
43  'not-git': 'このフォルダは git のリポジトリではありません',
44  'not-github': 'GitHub のリポジトリではありません (GitHub を指す remote がありません)',
45  unsafe: 'git が所有者の確認で止めました (safe.directory に入れると読めます)',
46  error: 'git・gh を実行できませんでした',
47}
48export const NO_PR = 'このブランチの PR はありません'
49export const DETACHED = 'ブランチにいません (HEAD が外れています)'
50
51const FAIL_WORDS = new Set(['FAILURE', 'ERROR', 'TIMED_OUT', 'STARTUP_FAILURE', 'ACTION_REQUIRED'])
52
53/** statusCheckRollup の 1 件 (CheckRun か StatusContext) */
54export function checkOf(x: unknown): CiCheck | undefined {
55  if (typeof x !== 'object' || x === null) return undefined
56  const r = x as Record<string, unknown>
57  const name = str(r.name) || str(r.context) || '(名前なし)'
58  if (typeof r.state === 'string' && r.status === undefined) {
59    // StatusContext
60    const s = r.state.toUpperCase()
61    return { name, kind: s === 'SUCCESS' ? 'pass' : FAIL_WORDS.has(s) ? 'fail' : s === 'PENDING' || s === 'EXPECTED' ? 'run' : 'skip' }
62  }
63  const status = str(r.status).toUpperCase()
64  const c = str(r.conclusion).toUpperCase()
65  if (status !== 'COMPLETED') return { name, kind: 'run' }
66  return { name, kind: c === 'SUCCESS' ? 'pass' : FAIL_WORDS.has(c) ? 'fail' : 'skip' }
67}
68
69/** gh pr view --json の出力。形が違えば例外 */
70export function parsePr(stdout: string): CiPr {
71  const r: unknown = JSON.parse(stdout)
72  if (typeof r !== 'object' || r === null || Array.isArray(r)) throw new Error('PR の JSON の形が違います')
73  const o = r as Record<string, unknown>
74  const rollup = Array.isArray(o.statusCheckRollup) ? o.statusCheckRollup : []
75  return {
76    number: typeof o.number === 'number' ? o.number : 0,
77    title: str(o.title),
78    state: str(o.state).toUpperCase(),
79    isDraft: o.isDraft === true,
80    url: httpsOnly(o.url),
81    review: str(o.reviewDecision).toUpperCase(),
82    checks: rollup.map(checkOf).filter((c): c is CiCheck => c !== undefined),
83  }
84}
85
86const RUN_LABEL: Record<string, string> = {
87  success: '成功',
88  failure: '失敗',
89  cancelled: '取り消し',
90  skipped: '飛ばした',
91  timed_out: '時間切れ',
92  startup_failure: '起動失敗',
93  action_required: '要対応',
94  neutral: '中立',
95  stale: '古い',
96}
97
98/** gh run list --json の出力。配列でなければ例外 */
99export function parseRuns(stdout: string): CiRun[] {
100  const data: unknown = JSON.parse(stdout)
101  if (!Array.isArray(data)) throw new Error('Actions の JSON の形が違います')
102  return data
103    .filter((x): x is Record<string, unknown> => typeof x === 'object' && x !== null)
104    .map(r => {
105      const status = str(r.status).toLowerCase()
106      const c = str(r.conclusion).toLowerCase()
107      const isRunning = status !== 'completed'
108      const kind: CiKind = isRunning ? 'run' : c === 'success' ? 'pass' : FAIL_WORDS.has(c.toUpperCase()) ? 'fail' : 'skip'
109      const at = Date.parse(str(r.createdAt))
110      return {
111        name: str(r.name) || '(名前なし)',
112        kind,
113        label: isRunning ? (status === 'queued' || status === 'waiting' || status === 'pending' ? '待ち' : '実行中') : (RUN_LABEL[c] ?? (c || '終了')),
114        url: httpsOnly(r.url),
115        createdAt: Number.isFinite(at) ? at : 0,
116        event: str(r.event),
117      }
118    })
119}
120
121/** 走っている物があるか (読み直しの間隔を縮める) */
122export const isRunning = (snap: CiSnap) => snap.kind === 'ok' && (snap.runs.some(r => r.kind === 'run') || (snap.pr?.checks.some(c => c.kind === 'run') ?? false))
123
124export function ago(at: number, now: number) {
125  if (at <= 0) return '─'
126  const m = Math.floor((now - at) / 60_000)
127  if (m < 1) return '今'
128  if (m < 60) return `${m} 分前`
129  if (m < 60 * 24) return `${Math.floor(m / 60)} 時間前`
130  return `${Math.floor(m / 60 / 24)} 日前`
131}
132
133const wide = (ch: string) => /[⺀-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]/.test(ch)
134/** 全角 2・半角 1 の幅で max に収め、はみ出たら末尾を … にする */
135export function cut(s: string, max: number) {
136  if ([...s].reduce((n, ch) => n + (wide(ch) ? 2 : 1), 0) <= max) return s
137  let out = ''
138  let n = 1
139  for (const ch of s) {
140    n += wide(ch) ? 2 : 1
141    if (n > max) break
142    out += ch
143  }
144  return `${out}…`
145}
146
147const esc = (s: string) => clean(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
148/** 共通の見出し帯の下に body を置く(body は見出しを除いた座標で書く) */
149const svgDoc = (h: number, body: string, title: string, sub: string, accent: string) =>
150  frame(h + HEADER_H, header(title, sub, accent) + `<g transform="translate(0 ${HEADER_H})">${body}</g>`)
151
152// C はテーマで中身が替わるので、呼ぶたびに読む
153const KIND_COLOR = (k: CiKind) => ({ pass: C.green, fail: C.red, run: C.blue, skip: C.dim })[k]
154export const KIND_MARK: Record<CiKind, string> = { pass: '●', fail: '■', run: '○', skip: '─' }
155
156/** 丸 1 つ。走っている物は青い輪が回る (SMIL) */
157function dot(cx: number, cy: number, kind: CiKind) {
158  const color = KIND_COLOR(kind)
159  if (kind !== 'run') return `<circle cx="${cx}" cy="${cy}" r="7" fill="${color}"/>`
160  return (
161    `<circle cx="${cx}" cy="${cy}" r="7" fill="none" stroke="${C.line}" stroke-width="2.5"/>` +
162    `<circle cx="${cx}" cy="${cy}" r="7" fill="none" stroke="${color}" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="14 30">` +
163    `<animateTransform attributeName="transform" type="rotate" from="0 ${cx} ${cy}" to="360 ${cx} ${cy}" dur="1s" repeatCount="indefinite"/></circle>`
164  )
165}
166
167export const stateLabel = (pr: CiPr) =>
168  pr.state === 'MERGED' ? 'マージ' : pr.state === 'CLOSED' ? '閉' : pr.isDraft ? '下書き' : '開'
169const stateColor = (pr: CiPr) => (pr.state === 'MERGED' ? C.purple : pr.state === 'CLOSED' ? C.red : pr.isDraft ? C.dim : C.green)
170export const reviewLabel = (review: string) =>
171  review === 'APPROVED' ? '承認済み' : review === 'CHANGES_REQUESTED' ? '修正の依頼' : review === 'REVIEW_REQUIRED' ? 'レビュー待ち' : 'レビューなし'
172const reviewColor = (review: string) => (review === 'APPROVED' ? C.green : review === 'CHANGES_REQUESTED' ? C.red : review === 'REVIEW_REQUIRED' ? C.yellow : C.dim)
173
174const ORDER: Record<CiKind, number> = { fail: 0, run: 1, pass: 2, skip: 3 }
175/** 落ちた・走っている物を先に */
176export const sortChecks = (checks: CiCheck[]) => [...checks].sort((a, b) => ORDER[a.kind] - ORDER[b.kind])
177export const tally = (checks: { kind: CiKind }[]) => ({
178  pass: checks.filter(c => c.kind === 'pass').length,
179  fail: checks.filter(c => c.kind === 'fail').length,
180  run: checks.filter(c => c.kind === 'run').length,
181  skip: checks.filter(c => c.kind === 'skip').length,
182})
183
184const MAX_CHECK_ROWS = 10
185
186/** 上の SVG: PR の札とチェックの丸。時刻を含めない (読み直しで回る丸を止めない) */
187export function prSvg(snap: CiSnap) {
188  if (snap.kind !== 'ok') {
189    const text = snap.kind === 'problem' ? PROBLEM_TEXT[snap.problem] : '読み込み中'
190    const color = snap.kind === 'problem' ? (snap.problem === 'error' ? C.red : C.yellow) : C.dim
191    return svgDoc(
192      76,
193      `<rect x="8" y="8" width="364" height="60" rx="8" fill="${C.face}" stroke="${C.line}"/><rect x="8" y="8" width="4" height="60" rx="2" fill="${color}"/>` +
194        `<text x="24" y="34" font-size="15" font-weight="bold" fill="${color}">${snap.kind === 'problem' ? '読めません' : '読み込み中'}</text>` +
195        `<text x="24" y="56" font-size="12" fill="${C.text}">${esc(cut(text, 54))}</text>`,
196      'CI',
197      '',
198      color,
199    )
200  }
201  const branch = snap.branch || '(ブランチなし)'
202  const pr = snap.pr
203  if (!pr) {
204    return svgDoc(
205      76,
206      `<rect x="8" y="8" width="364" height="60" rx="8" fill="${C.face}" stroke="${C.line}"/>` +
207        `<text x="20" y="32" font-size="12" fill="${C.dim}">${esc(cut(branch, 54))}</text>` +
208        `<text x="20" y="54" font-size="14" fill="${C.text}">${esc(cut(snap.prNote || NO_PR, 50))}</text>`,
209      'CI',
210      '',
211      C.dim,
212    )
213  }
214  const color = stateColor(pr)
215  const label = stateLabel(pr)
216  let s = ''
217  // 題は 2 行まで
218  const t1 = cut(pr.title, 52)
219  const rest = t1.endsWith('…') ? pr.title.slice(t1.length - 1) : ''
220  s += `<text x="20" y="32" font-size="20" font-weight="bold" fill="${C.text}">#${pr.number}</text>`
221  const bx = 34 + String(pr.number).length * 12
222  s += `<rect x="${bx}" y="17" width="${label.length * 13 + 16}" height="20" rx="10" fill="${color}" opacity="0.2" stroke="${color}"/>`
223  s += `<text x="${bx + 8}" y="32" font-size="12" fill="${color}">${label}</text>`
224  s += `<text x="360" y="32" font-size="12" fill="${reviewColor(pr.review)}" text-anchor="end">${reviewLabel(pr.review)}</text>`
225  s += `<text x="20" y="56" font-size="13" fill="${C.text}">${esc(t1)}</text>`
226  if (rest !== '') s += `<text x="20" y="74" font-size="13" fill="${C.text}">${esc(cut(rest, 52))}</text>`
227  s += `<text x="20" y="96" font-size="12" fill="${C.dim}">${esc(cut(branch, 54))}</text>`
228  const n = tally(pr.checks)
229  s +=
230    `<text x="20" y="120" font-size="12"><tspan fill="${C.green}">通過 ${n.pass}</tspan><tspan dx="10" fill="${C.red}">失敗 ${n.fail}</tspan>` +
231    `<tspan dx="10" fill="${C.blue}">実行中 ${n.run}</tspan><tspan dx="10" fill="${C.dim}">他 ${n.skip}</tspan></text>`
232  const rows = sortChecks(pr.checks).slice(0, MAX_CHECK_ROWS)
233  if (pr.checks.length === 0) s += `<text x="20" y="144" font-size="12" fill="${C.dim}">チェックはありません</text>`
234  rows.forEach((c, i) => {
235    const y = 144 + i * 22
236    s += fadeIn(dot(28, y - 4, c.kind) + `<text x="44" y="${y}" font-size="12" fill="${C.text}">${esc(cut(c.name, 48))}</text>`, Number((0.1 + i * 0.05).toFixed(2)))
237  })
238  const extra = pr.checks.length - rows.length
239  const end = 144 + Math.max(1, rows.length) * 22 + (extra > 0 ? 18 : 0)
240  if (extra > 0) s += `<text x="20" y="${end - 14}" font-size="12" fill="${C.dim}">ほか ${extra} 件</text>`
241  const card = `<rect x="8" y="8" width="364" height="${end - 8}" rx="8" fill="${C.face}" stroke="${C.line}"/><rect x="8" y="8" width="4" height="${end - 8}" rx="2" fill="${color}"/>`
242  return svgDoc(end + 8, card + s, 'CI', `チェック ${pr.checks.length} 件`, color)
243}
244
245/** 下の SVG: Actions の一覧 (名前・結果・何分前) */
246export function runsSvg(snap: Extract<CiSnap, { kind: 'ok' }>) {
247  const rows = snap.runs.slice(0, RUN_LIMIT)
248  // 「何分前」が入り読み直しのたびに文字列が変わるので、見出しの線のほかに動きは足さない
249  const h = 24 + Math.max(1, rows.length) * 40
250  let s = `<rect x="8" y="8" width="364" height="${h - 8}" rx="8" fill="${C.face}" stroke="${C.line}"/>`
251  if (rows.length === 0) s += `<text x="20" y="34" font-size="12" fill="${C.dim}">${esc(cut(snap.runsNote || '実行はありません', 54))}</text>`
252  rows.forEach((r, i) => {
253    const y = 32 + i * 40
254    s += `<circle cx="28" cy="${y}" r="6" fill="${KIND_COLOR(r.kind)}"/>`
255    s += `<text x="44" y="${y + 4}" font-size="13" fill="${C.text}">${esc(cut(r.name, 34))}</text>`
256    s += `<text x="360" y="${y + 4}" font-size="12" fill="${KIND_COLOR(r.kind)}" text-anchor="end">${esc(r.label)}</text>`
257    s += `<text x="44" y="${y + 22}" font-size="12" fill="${C.dim}">${esc(`${ago(r.createdAt, snap.loadedAt)}${r.event !== '' ? ` / ${r.event}` : ''}`)}</text>`
258  })
259  return svgDoc(h + 8, s, 'Actions', cut(snap.branch || '全ブランチ', 30), C.blue)
260}
261
262export type Line = { text: string; color?: string; isDim?: boolean; isBold?: boolean }
263
264/** terminal と Svg の alt に使う文 */
265export function prLines(snap: CiSnap): Line[] {
266  if (snap.kind === 'idle') return [{ text: '読み込み中', isDim: true }]
267  if (snap.kind === 'problem') {
268    const lines: Line[] = [{ text: PROBLEM_TEXT[snap.problem], color: snap.problem === 'error' ? 'red' : 'yellow' }]
269    if (snap.detail !== '') lines.push({ text: snap.detail, isDim: true })
270    return lines
271  }
272  const lines: Line[] = [{ text: `ブランチ ${snap.branch || '(なし)'}`, isDim: true }]
273  const pr = snap.pr
274  if (!pr) return [...lines, { text: snap.prNote || NO_PR }]
275  const n = tally(pr.checks)
276  lines.push(
277    { text: `#${pr.number} [${stateLabel(pr)}] ${pr.title}`, isBold: true },
278    { text: `${reviewLabel(pr.review)} / 通過 ${n.pass} 失敗 ${n.fail} 実行中 ${n.run} 他 ${n.skip}`, color: n.fail > 0 ? 'red' : n.run > 0 ? 'blue' : n.pass > 0 ? 'green' : undefined },
279  )
280  for (const c of sortChecks(pr.checks).slice(0, MAX_CHECK_ROWS)) lines.push({ text: `  ${KIND_MARK[c.kind]} ${c.name}`, color: c.kind === 'fail' ? 'red' : c.kind === 'run' ? 'blue' : undefined })
281  return lines
282}
283
284export function runLines(snap: Extract<CiSnap, { kind: 'ok' }>): Line[] {
285  if (snap.runs.length === 0) return [{ text: snap.runsNote || '実行はありません', isDim: true }]
286  return snap.runs.slice(0, RUN_LIMIT).map(r => ({
287    text: `${KIND_MARK[r.kind]} ${r.name} ${r.label} ${ago(r.createdAt, snap.loadedAt)}`,
288    color: r.kind === 'fail' ? 'red' : r.kind === 'run' ? 'blue' : r.kind === 'pass' ? 'green' : undefined,
289  }))
290}
291

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/** 丸の色の種類: 通った / 落ちた / 走っている / 飛ばした・取り消し・その他 */
2export type CiKind = 'pass' | 'fail' | 'run' | 'skip'
3
4/** PR のチェック 1 つ (statusCheckRollup の 1 件) */
5export type CiCheck = { name: string; kind: CiKind }
6
7export type CiPr = {
8  number: number
9  title: string
10  /** OPEN / CLOSED / MERGED */
11  state: string
12  isDraft: boolean
13  /** https で始まる時だけ。違えば空 */
14  url: string
15  /** APPROVED / CHANGES_REQUESTED / REVIEW_REQUIRED / 空 */
16  review: string
17  checks: CiCheck[]
18}
19
20/** Actions の実行 1 回 */
21export type CiRun = {
22  name: string
23  kind: CiKind
24  /** 成功・失敗・実行中 など */
25  label: string
26  url: string
27  /** 始まった時刻 (ms)。読めなければ 0 */
28  createdAt: number
29  event: string
30}
31
32/** 読めなかった理由。それぞれ別の文を出す */
33export type CiProblem = 'no-gh' | 'no-login' | 'not-git' | 'not-github' | 'unsafe' | 'error'
34
35export type CiSnap =
36  | { kind: 'idle' }
37  | { kind: 'problem'; problem: CiProblem; detail: string }
38  | {
39      kind: 'ok'
40      /** 今のブランチ。HEAD が外れていれば空 */
41      branch: string
42      pr?: CiPr
43      /** PR が無い・読めない時の一言 */
44      prNote: string
45      runs: CiRun[]
46      runsNote: string
47      loadedAt: number
48    }
49
50declare module 'claude-code' {
51  interface PluginState {
52    'ci-pane': {
53      snap: CiSnap
54      isLoading: boolean
55    }
56  }
57}
58