port-watch

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { PortWatchList, PortWatchRow } from '../types'
5import { canStop, countsOf, cut, isWindowsCwd, mergeRows, parseLsof, parseNetstat, parseTasklist, plain, rowKey, stopArgv, summaryOf, tilesSvg } from './ports'
6import { followTheme, readTheme } from './style'
7
8const PANE = 'port-watch'
9const TITLE = 'ポート'
10const DESCRIPTION = '待ち受けている TCP のポートとプロセスをペインで見る'
11/** ペインが開いている間、一覧を読む間隔 */
12const POLL_MS = 5000
13/** 「止める」の 1 回目から、2 回目を受け付ける時間 */
14const ARM_MS = 10_000
15
16const LIST = atom({ plugin: 'port-watch', key: 'list' } as const, { kind: 'idle' })
17const BASE = atom({ plugin: 'port-watch', key: 'baseline' } as const, null)
18const ARMED = atom({ plugin: 'port-watch', key: 'armed' } as const, null)
19const NARROW = atom({ plugin: 'port-watch', key: 'isNarrow' } as const, true)
20const NOTE = atom({ plugin: 'port-watch', key: 'note' } as const, '')
21
22type $ = EngineInterface
23
24// ponytail: 主の名前を持てたか・読み込み中かはモジュール変数。リロードでも session.start が来て決め直す
25let ownsMain = false
26let isLoading = false
27
28const firstLine = (s: string) => cut(plain(s.trim().split(/\r?\n/)[0] ?? ''), 120)
29
30/** 今の一覧を読む。書き込みはしない */
31async function readList($: $): Promise<PortWatchList> {
32  const cwd = await $.session.cwd()
33  const run = (argv: string[]) => $.process.run(argv, { timeoutMs: 15_000 })
34  try {
35    if (isWindowsCwd(cwd)) {
36      // -p TCP だと v6 の行が出ないので、全部読んで TCP の行だけ拾う
37      const [ns, tl] = await Promise.all([run(['netstat', '-ano']), run(['tasklist', '/FO', 'CSV', '/NH']).catch(() => undefined)])
38      if (ns.exitCode !== 0) return { kind: 'error', message: `netstat が失敗しました: ${firstLine(ns.stderr || ns.stdout) || `終了コード ${ns.exitCode}`}` }
39      const names = tl && tl.exitCode === 0 ? parseTasklist(tl.stdout) : new Map<number, string>()
40      return { kind: 'ok', rows: mergeRows(parseNetstat(ns.stdout).map(r => ({ ...r, name: names.get(r.pid) ?? '?' }))) }
41    }
42    const r = await run(['lsof', '-nP', '-iTCP', '-sTCP:LISTEN'])
43    // 待ち受けが 1 本も無い時、lsof は何も書かずに 1 で終わる
44    if (r.exitCode !== 0 && r.stdout.trim() === '' && r.stderr.trim() !== '') return { kind: 'error', message: `lsof が失敗しました: ${firstLine(r.stderr)}` }
45    return { kind: 'ok', rows: mergeRows(parseLsof(r.stdout)) }
46  } catch (err) {
47    return { kind: 'error', message: `一覧のコマンドを実行できません: ${firstLine(err instanceof Error ? err.message : String(err))}` }
48  }
49}
50
51/** 読んで $.state に置く。初めて読めた一覧をセッションの始めの一覧として覚える */
52async function refresh($: $) {
53  if (isLoading) return
54  isLoading = true
55  try {
56    const list = await readList($)
57    await update($, LIST, () => list)
58    if (list.kind === 'ok') await update($, BASE, b => b ?? list.rows.map(rowKey))
59    const now = await $.clock.now()
60    const armed = await read($, ARMED)
61    if (armed && now - armed.at > ARM_MS) await update($, ARMED, () => null)
62  } finally {
63    isLoading = false
64  }
65}
66
67async function copyUrl($: $, row: PortWatchRow, surface: Parameters<$['ui']['copy']>[0]['surface']) {
68  const text = `http://localhost:${row.port}`
69  const r = await $.ui.copy({ text, surface }).catch(() => ({ isCopied: false as const, reason: 'refused' as const }))
70  await update($, NOTE, () => (r.isCopied ? `${text} を写しました` : `写せませんでした (${r.reason})`))
71}
72
73/** 1 回目は構えるだけ。2 回目で一覧を読み直し、その PID がまだそのポートを持っていれば止める */
74async function pressStop($: $, row: PortWatchRow) {
75  const now = await $.clock.now()
76  const armed = await read($, ARMED)
77  if (!armed || armed.port !== row.port || armed.pid !== row.pid || now - armed.at > ARM_MS) {
78    await update($, ARMED, () => ({ port: row.port, pid: row.pid, at: now }))
79    await update($, NOTE, () => `もう一度押すと ${row.name} (PID ${row.pid}) を止めます`)
80    return
81  }
82  await update($, ARMED, () => null)
83  const fresh = await readList($)
84  const still = fresh.kind === 'ok' ? fresh.rows.find(r => r.port === row.port && r.pid === row.pid) : undefined
85  const argv = still && canStop(still) ? stopArgv(isWindowsCwd(await $.session.cwd()), still.pid) : undefined
86  if (!argv) {
87    await update($, NOTE, () => (fresh.kind === 'ok' ? `ポート ${row.port} の持ち主が変わったので止めませんでした` : '一覧を読み直せなかったので止めませんでした'))
88    await update($, LIST, () => fresh)
89    return
90  }
91  const r = await $.process.run(argv, { timeoutMs: 15_000 }).catch((err: unknown) => ({ exitCode: -1, stdout: '', stderr: err instanceof Error ? err.message : String(err) }))
92  await update($, NOTE, () =>
93    r.exitCode === 0 ? `${row.name} (PID ${row.pid}) を止めました` : `止められませんでした: ${firstLine(r.stderr || r.stdout) || `終了コード ${r.exitCode}`}`,
94  )
95  await refresh($)
96}
97
98const openPane = async ($: $) => {
99  await $.ui.open({ id: PANE, title: TITLE })
100  // netstat と tasklist は 1 秒近くかかる。コマンドは待たせず、読むのは裏で (読み終われば描き直る)
101  void refresh($).catch(() => {})
102  return { text: 'ポートのペインを開きました。' }
103}
104
105export const register: Register = on => {
106  followTheme(on)
107  on('session.start', async ($, e, next) => {
108    const started = await next(e)
109    await readTheme($)
110    // /ports が拒まれたら /port-watch にする
111    const got = await $.command.register({ name: 'ports', description: DESCRIPTION }).catch(() => undefined)
112    ownsMain = got?.command === 'ports'
113    if (!ownsMain) await $.command.register({ name: 'port-watch', description: DESCRIPTION }).catch(() => {})
114    // 始めの一覧は起動を待たせずに読む。リロードでは覚えた一覧を残す (refresh は未設定の時だけ書く)
115    $.clock.after(1000, () => void refresh($).catch(() => {}))
116    $.clock.every(POLL_MS, () => {
117      void (async () => {
118        const panes = await $.ui.panes().catch(() => [])
119        if (panes.some(p => p.id === PANE)) await refresh($)
120      })().catch(() => {})
121    })
122    return started
123  })
124
125  // /ports を持てなかった時は、その名前の持ち主に回す
126  on('command.run', { command: 'ports' }, ($, e, next) => (ownsMain ? openPane($) : next(e))).catch(($, e, next) => next(e))
127  on('command.run', { command: 'port-watch' }, openPane)
128
129  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
130    const t = $.ui.resolve(e)
131    const { Box, Text, Button } = t
132    // terminal の表にも Svg の名前があるので、画面の種類でも分ける
133    const Svg = e.surface !== 'terminal' && 'Svg' in t ? t.Svg : undefined
134    const list = await read($, LIST)
135    const baseline = await read($, BASE)
136    const armed = await read($, ARMED)
137    const isNarrow = await read($, NARROW)
138    const note = await read($, NOTE)
139    const rows = list.kind === 'ok' ? list.rows : []
140    const counts = countsOf(rows, baseline)
141    const isAdded = (r: PortWatchRow) => baseline !== null && !baseline.includes(rowKey(r))
142    const shown = isNarrow ? rows.filter(r => canStop(r) || isAdded(r)) : rows
143    const hidden = rows.length - shown.length
144
145    return (
146      <Box flexDirection="column" gap={1}>
147        {Svg ? (
148          <Svg source={tilesSvg(counts, list.kind === 'error')} alt={summaryOf(counts)} />
149        ) : (
150          <Text key="summary" bold>
151            {summaryOf(counts)}
152          </Text>
153        )}
154        {list.kind === 'error' && (
155          <Text key="error" color="red">
156            {list.message}
157          </Text>
158        )}
159        {list.kind === 'idle' && <Text dimColor>読み込み中…</Text>}
160        <Box key="top" flexDirection="row" gap={1}>
161          <Button key="reload" label="読み直す" onPress={() => void refresh($).catch(() => {})} />
162          <Button key="narrow" dimColor label={isNarrow ? '全部出す' : '開発用だけ'} onPress={() => void update($, NARROW, v => !v)} />
163        </Box>
164        {list.kind === 'ok' && shown.length === 0 && (
165          <Text dimColor>{hidden > 0 ? `開発用の待ち受けはありません (ほか ${hidden} 本)` : '待ち受けているポートはありません'}</Text>
166        )}
167        {shown.map(r => {
168          const id = `${r.port}-${r.pid}`
169          const isArmed = armed?.port === r.port && armed.pid === r.pid
170          return (
171            <Box key={`row-${id}`} flexDirection="column">
172              <Text color={isAdded(r) ? 'yellow' : undefined} bold>
173                {`${isAdded(r) ? '●' : '○'} ${r.port}  ${cut(r.name, 18)}`}
174              </Text>
175              <Text dimColor>{`  PID ${r.pid}${isAdded(r) ? '  このセッションで増えた' : ''}`}</Text>
176              {/* 29 桁のペインで 2 つ並べると折れるので縦に置く */}
177              <Box flexDirection="column">
178                <Button key={`copy-${id}`} label="URL を写す" onPress={press => void copyUrl($, r, press.surface)} />
179                {canStop(r) && (
180                  <Button
181                    key={`stop-${id}`} dimColor={!isArmed}
182                    label={isArmed ? 'もう一度押すと止めます' : '止める'}
183                    variant={isArmed ? 'primary' : undefined}
184                    onPress={() => void pressStop($, r).catch(() => {})}
185                  />
186                )}
187              </Box>
188            </Box>
189          )
190        })}
191        {isNarrow && hidden > 0 && shown.length > 0 && <Text dimColor>{`ほか ${hidden} 本は「全部出す」で`}</Text>}
192        {note !== '' && <Text dimColor>{note}</Text>}
193      </Box>
194    )
195  })
196}
197

1// 待ち受けているポートの一覧を読み、ペインの SVG と行を組む。どれも純関数
2import type { PortWatchRow } from '../types'
3import { C, HEADER_H, countUp, frame, header } from './style'
4
5/** 制御文字を落とす。エンジンは制御文字を含む Text・alt を描かない */
6export const plain = (s: string) => s.replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, '')
7export const cut = (s: string, n: number) => ([...s].length > n ? `${[...s].slice(0, n - 1).join('')}…` : s)
8
9/** cwd が `X:\` か `\\server\` の形なら Windows */
10export const isWindowsCwd = (cwd: string) => /^(?:[A-Za-z]:[\\/]|\\\\)/.test(cwd)
11
12export const rowKey = (r: { port: number; pid: number }) => `${r.port}/${r.pid}`
13
14// 数字だけ。0 は無い PID、桁あふれも受けない
15const toPid = (s: string | undefined) => (s !== undefined && /^\d{1,10}$/.test(s) && Number(s) > 0 ? Number(s) : undefined)
16const portOf = (addr: string) => {
17  const m = /:(\d{1,5})$/.exec(addr)
18  const n = m ? Number(m[1]) : NaN
19  return n > 0 && n < 65536 ? n : undefined
20}
21
22/**
23 * `netstat -ano` の TCP の LISTENING の行。見出しは言語で変わる (日本語は化ける) ので、行頭が TCP の行だけ読む。
24 * v6 の行も同じ TCP で出る
25 */
26export function parseNetstat(out: string): { port: number; pid: number }[] {
27  const rows: { port: number; pid: number }[] = []
28  for (const line of out.split(/\r?\n/)) {
29    const m = /^\s*TCP\s+(\S+)\s+\S+\s+LISTEN\w*\s+(\d+)\s*$/i.exec(line)
30    if (!m) continue
31    const port = portOf(m[1] ?? '')
32    const pid = toPid(m[2])
33    if (port !== undefined && pid !== undefined) rows.push({ port, pid })
34  }
35  return rows
36}
37
38/** `tasklist /FO CSV /NH` から PID → 名前。メモリの欄に , が入るので " で区切る */
39export function parseTasklist(out: string) {
40  const names = new Map<number, string>()
41  for (const line of out.split(/\r?\n/)) {
42    const f = [...line.matchAll(/"((?:[^"]|"")*)"/g)].map(m => (m[1] ?? '').replace(/""/g, '"'))
43    const pid = toPid(f[1])
44    if (f[0] && pid !== undefined) names.set(pid, f[0])
45  }
46  return names
47}
48
49/** `lsof -nP -iTCP -sTCP:LISTEN` の行。名前は COMMAND 欄 (lsof は空白を \x20 にする) */
50export function parseLsof(out: string): PortWatchRow[] {
51  const rows: PortWatchRow[] = []
52  for (const line of out.split(/\r?\n/).slice(1)) {
53    const f = line.trim().split(/\s+/)
54    if (f[f.length - 1] !== '(LISTEN)') continue
55    const port = portOf(f[f.length - 2] ?? '')
56    const pid = toPid(f[1])
57    if (port !== undefined && pid !== undefined) rows.push({ port, pid, name: (f[0] ?? '').replace(/\\x20/g, ' ') })
58  }
59  return rows
60}
61
62/** 同じポートと PID をまとめ、ポートの順に。名前は制御文字を落として 40 字まで */
63export function mergeRows(rows: PortWatchRow[]): PortWatchRow[] {
64  const map = new Map<string, PortWatchRow>()
65  for (const r of rows) if (!map.has(rowKey(r))) map.set(rowKey(r), { ...r, name: cut(plain(r.name), 40) || '?' })
66  return [...map.values()].sort((a, b) => a.port - b.port || a.pid - b.pid)
67}
68
69/** 開発用の実行環境。拡張子 .exe と末尾の版 (python3.11 など) は外して比べる */
70const DEV = new Set([
71  'node', 'nodejs', 'python', 'py', 'pythonw', 'deno', 'bun', 'ruby', 'java', 'dotnet', 'php', 'go',
72  'uvicorn', 'gunicorn', 'hypercorn', 'rails', 'puma', 'npm', 'pnpm', 'yarn',
73])
74export const baseName = (name: string) => name.toLowerCase().replace(/\.exe$/, '').replace(/[\d.]+$/, '')
75
76/** 「止める」を付けてよい行: 開発用の実行環境で、ポートが 1024 以上 */
77export const canStop = (r: PortWatchRow) => r.port >= 1024 && DEV.has(baseName(r.name))
78
79/** 止めるコマンド。PID が数字でなければ undefined */
80export function stopArgv(isWindows: boolean, pid: number): string[] | undefined {
81  const s = String(pid)
82  if (!/^\d{1,10}$/.test(s) || pid <= 0) return undefined
83  return isWindows ? ['taskkill', '/PID', s, '/T', '/F'] : ['kill', s]
84}
85
86export type Counts = { all: number; added: number; dev: number }
87
88export const countsOf = (rows: PortWatchRow[], baseline: string[] | null): Counts => ({
89  all: rows.length,
90  added: baseline ? rows.filter(r => !baseline.includes(rowKey(r))).length : 0,
91  dev: rows.filter(canStop).length,
92})
93
94const TILE_Y = HEADER_H + 8
95
96function tile(x: number, label: string, value: number, color: string, delay: number) {
97  const y = TILE_Y
98  return (
99    `<rect x="${x}" y="${y}" width="116" height="66" rx="6" fill="${C.face}" stroke="${C.line}"/>` +
100    `<rect x="${x}" y="${y}" width="3" height="66" rx="1.5" fill="${color}"/>` +
101    `<text x="${x + 12}" y="${y + 20}" font-size="12" fill="${C.dim}">${label}</text>` +
102    countUp(value, `x="${x + 12}" y="${y + 54}" font-size="28" font-weight="bold" fill="${value > 0 ? color : C.dim}"`, String, delay)
103  )
104}
105
106/**
107 * 上のタイル。見張りの印はゆっくり脈打つ。時刻を含めないので、数が変わらなければ source も変わらず、
108 * 数が増える動きも数が変わった時だけ走る
109 */
110export function tilesSvg(c: Counts, isError: boolean) {
111  // 見出しの右の「5 秒ごと」の左に置く
112  const cx = 296
113  const pulse = isError
114    ? `<circle cx="${cx}" cy="23" r="5" fill="${C.orange}"/>`
115    : `<circle cx="${cx}" cy="23" r="5" fill="${C.green}"/>` +
116      `<circle cx="${cx}" cy="23" r="5" fill="none" stroke="${C.green}" stroke-width="2">` +
117      `<animate attributeName="r" values="5;12" dur="2.5s" repeatCount="indefinite"/>` +
118      `<animate attributeName="opacity" values="0.8;0" dur="2.5s" repeatCount="indefinite"/></circle>`
119  return frame(
120    TILE_Y + 66 + 10,
121    header(isError ? '一覧を読めません' : '待ち受けているポート', '5 秒ごと', isError ? C.orange : C.green) +
122      pulse +
123      tile(12, '待ち受け', c.all, C.blue, 0.1) +
124      tile(132, '今回増えた', c.added, C.yellow, 0.2) +
125      tile(252, '開発用', c.dev, C.green, 0.3),
126  )
127}
128
129export const summaryOf = (c: Counts) => `待ち受け ${c.all} / 増えた ${c.added} / 開発用 ${c.dev}`
130

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 本。同じポートと PID の v4・v6 は 1 本にまとめる */
2export type PortWatchRow = { port: number; pid: number; name: string }
3
4export type PortWatchList =
5  | { kind: 'idle' }
6  | { kind: 'ok'; rows: PortWatchRow[] }
7  /** 一覧のコマンドが無い・失敗した */
8  | { kind: 'error'; message: string }
9
10declare module 'claude-code' {
11  interface PluginState {
12    'port-watch': {
13      list: PortWatchList
14      /** セッションの始めに待ち受けていた物の "ポート/PID"。まだ読めていなければ null */
15      baseline: string[] | null
16      /** 「止める」を 1 回押した行。もう一度押すと止める */
17      armed: { port: number; pid: number; at: number } | null
18      /** 開発用と増えた物だけを出す */
19      isNarrow: boolean
20      /** ボタンの結果などの一言。空なら出さない */
21      note: string
22    }
23  }
24}
25