project-board

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { ProjectBoardProject, ProjectBoardSort } from '../types'
5import {
6  ageDays,
7  ageLabel,
8  arrange,
9  cardSvg,
10  dateLabel,
11  FRESH_ROWS,
12  freshnessSvg,
13  normalize,
14  obsidianUrl,
15  toProject,
16} from './board'
17import { followTheme, readTheme } from './style'
18
19const PANE = 'project-board'
20const TITLE = 'プロジェクト'
21const RELOAD_MS = 5 * 60_000
22const HEAD = 4000
23const FULL = 100_000
24
25const PROJECTS = atom({ plugin: 'project-board', key: 'projects' } as const, [])
26const LOADED = atom({ plugin: 'project-board', key: 'loadedAt' } as const, 0)
27const ERROR = atom({ plugin: 'project-board', key: 'error' } as const, '')
28const SORT = atom({ plugin: 'project-board', key: 'sort' } as const, 'new')
29const FILTER = atom({ plugin: 'project-board', key: 'filter' } as const, '')
30const DETAIL = atom({ plugin: 'project-board', key: 'detail' } as const, null)
31
32// 絶対パス(/x、\x、C:\x、C:/x)だけを受け付ける。相対パスや「C:」は今のフォルダから読まれてしまう
33const isAbsolute = (path: string) => /^(?:[\\/]|[A-Za-z]:[\\/])/.test(path)
34
35// 設定のフォルダ: 絶対パスでなければ未設定(空)。末尾の区切りは外すが、根(C:\ や /)は区切りを残す
36const folderOption = (value: unknown) => {
37  const raw = String(value ?? '').trim()
38  if (!isAbsolute(raw)) return ''
39  const trimmed = raw.replace(/[\\/]+$/, '')
40  return trimmed === '' || /^[A-Za-z]:$/.test(trimmed) ? raw.slice(0, trimmed.length + 1) : trimmed
41}
42
43// 本文に file: リンクがありうるか。Markdown は file: も押せるリンクにするので、ありうる時は全部のリンクを押しても何もしない側にする。
44// リンクの形 (参照・山かっこ・かっこ入りのパス) を拾い切るのは難しいので、本文に file: があるかで決める。
45// Markdown はリンク先の \: と文字参照 (: : など) をほどくので、それらも file: とみなす
46const mayHaveFileLink = (text: string) =>
47  /\bfile:|&(?:#x?[0-9a-f]+|[a-z][a-z0-9]*);/i.test(text.replace(/\\([!-/:-@[-`{-~])/g, '$1'))
48
49const SORTS: { value: ProjectBoardSort; label: string }[] = [
50  { value: 'new', label: '更新が新しい順' },
51  { value: 'name', label: '名前順' },
52  { value: 'old', label: '古い順' },
53]
54
55// 一覧を読み直して state に置く。描画フックからは呼ばない
56async function load($: EngineInterface, memoDir: string) {
57  // 空なら読まない (空を今のフォルダと読ませない)
58  if (memoDir === '') {
59    await update($, ERROR, () => 'メモのフォルダが未設定です。/config で project-board の memoDir に *.md が並ぶフォルダの絶対パスを入れてください')
60    return
61  }
62  const sep = memoDir.includes('\\') || !memoDir.includes('/') ? '\\' : '/'
63  // 根(C:\ や /)は区切りで終わっているので足さない
64  const base = /[\\/]$/.test(memoDir) ? memoDir : `${memoDir}${sep}`
65  try {
66    const entries = await $.fs.list(memoDir)
67    const files = entries.filter(f => f.kind === 'file' && /\.md$/i.test(f.name))
68    const list = await Promise.all(
69      files.map(async f => {
70        const path = `${base}${f.name}`
71        const text = await $.fs.read(path).catch(() => '')
72        return toProject(f.name, path, f.mtimeMs, text)
73      }),
74    )
75    await update($, PROJECTS, () => list)
76    await update($, ERROR, () => '')
77  } catch {
78    await update($, ERROR, () => `メモのフォルダを読めません: ${memoDir}`)
79  }
80  const at = await $.clock.now()
81  await update($, LOADED, () => at)
82}
83
84async function openDetail($: EngineInterface, p: ProjectBoardProject, isFull: boolean) {
85  let text: string
86  try {
87    text = normalize(await $.fs.read(p.path))
88  } catch {
89    text = `メモを読めませんでした: ${p.path}`
90  }
91  const limit = isFull ? FULL : HEAD
92  const rest = text.length - limit
93  const body = rest > 0 && isFull ? `${text.slice(0, limit)}\n\n(残り ${rest} 字は省略。Obsidian で開いてください)` : text.slice(0, limit)
94  await update($, DETAIL, () => ({ name: p.name, body, more: !isFull && rest > 0 }))
95}
96
97export const register: Register = (on, options) => {
98  const memoDir = folderOption(options.memoDir)
99  const vaultRoot = folderOption(options.vaultRoot)
100  const vaultName = String(options.vaultName ?? '').trim()
101
102  followTheme(on)
103  on('session.start', async ($, e, next) => {
104    await readTheme($)
105    await $.command.register({ name: 'projects', description: '引き継ぎメモのプロジェクト一覧を開く' }).catch(() => {})
106    // 一度も開いていないセッションでは vault を読まない
107    $.clock.every(RELOAD_MS, () => {
108      void (async () => {
109        if ((await read($, LOADED)) > 0) await load($, memoDir)
110      })()
111    })
112
113    return next(e)
114  })
115
116  on('command.run', { command: 'projects' }, async $ => {
117    await load($, memoDir)
118    await $.ui.open({ id: PANE, title: TITLE })
119
120    return { text: 'プロジェクトのペインを開きました。' }
121  })
122
123  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
124    const t = $.ui.resolve(e)
125    const { Box, Text, Button, Markdown, Code, Link } = t
126    if (!('Select' in t)) return <Text dimColor>この画面では一覧を出せません</Text>
127    const { Select, Input } = t
128    // terminal の表にも Svg の名前があるので、画面の種類でも分ける
129    const Svg = e.surface !== 'terminal' && 'Svg' in t ? t.Svg : undefined
130
131    const now = await $.clock.now()
132    const list = await read($, PROJECTS)
133    const loadedAt = await read($, LOADED)
134    const error = await read($, ERROR)
135    const detail = await read($, DETAIL)
136
137    if (detail) {
138      const p = list.find(x => x.name === detail.name) ?? { name: detail.name, path: '', mtimeMs: now, title: '', lines: [] }
139      const url = p.path ? obsidianUrl(p.path, vaultRoot, vaultName) : undefined
140
141      return (
142        <Box flexDirection="column" gap={1}>
143          <Button key="back" dimColor label="戻る" onPress={() => void update($, DETAIL, () => null)} />
144          {Svg ? (
145            <Svg source={cardSvg(p, now)} alt={`${p.name}: ${p.lines.join(' / ')}`} />
146          ) : (
147            <Box key="card" flexDirection="column">
148              <Text bold>{p.name}</Text>
149              {p.title !== '' && p.title !== p.name && <Text dimColor>{p.title}</Text>}
150              <Text dimColor>{`更新 ${dateLabel(p.mtimeMs)}(${ageLabel(p.mtimeMs, now)})`}</Text>
151              {p.lines.map(l => (
152                <Text>{`・${l}`}</Text>
153              ))}
154            </Box>
155          )}
156          {/* remote 画面の Link は https: しか開けないので、terminal 以外はパスを Code で出す */}
157          {e.surface === 'terminal' && url ? (
158            <Link href={url} label="Obsidian で開く" />
159          ) : (
160            p.path !== '' && <Code source={url ? `${p.path}\n${url}` : p.path} />
161          )}
162          {mayHaveFileLink(detail.body) ? <Markdown key="body" text={detail.body} onLinkPress={() => {}} /> : <Markdown key="body" text={detail.body} />}
163          {detail.more && <Button key="more" label="続きを読む" onPress={() => void openDetail($, p, true)} />}
164        </Box>
165      )
166    }
167
168    const sort = await read($, SORT)
169    const filter = await read($, FILTER)
170    const shown = arrange(list, sort, filter)
171    const days = shown.map(p => ageDays(p.mtimeMs, now))
172    const count = (lo: number, hi: number) => days.filter(d => d > lo && d <= hi).length
173
174    return (
175      <Box flexDirection="column" gap={1}>
176        {loadedAt === 0 && <Text dimColor>読み込み中</Text>}
177        {error !== '' && <Text color="red">{error}</Text>}
178        {Svg ? (
179          <Svg
180            source={freshnessSvg(shown, now)}
181            alt={`鮮度: ${shown
182              .slice(0, FRESH_ROWS)
183              .map((p, i) => `${p.name} ${days[i]}日`)
184              .join('、')}${shown.length > FRESH_ROWS ? `、ほか ${shown.length - FRESH_ROWS} 件` : ''}`}
185          />
186        ) : (
187          <Text>{`鮮度 3日以内 ${count(-1, 3)} / 14日以内 ${count(3, 14)} / それ以上 ${count(14, Infinity)}`}</Text>
188        )}
189        <Box flexDirection="column">
190          <Select key="sort" options={SORTS} value={sort} onSelect={v => void update($, SORT, () => v as ProjectBoardSort)} />
191          <Button key="reload" dimColor label="再読込" onPress={() => void load($, memoDir)} />
192        </Box>
193        <Input
194          key="filter"
195          placeholder="名前で絞り込み"
196          value={filter}
197          submitLabel="絞り込む"
198          onInput={v => void update($, FILTER, () => v)}
199          onSubmit={v => void update($, FILTER, () => v)}
200        />
201        <Box flexDirection="column">
202          {shown.length === 0 && loadedAt > 0 && <Text dimColor>該当するメモがありません</Text>}
203          {shown.map(p => (
204            <Button key={`open:${p.name}`} plain onPress={() => void openDetail($, p, false)}>
205              {p.name} <Text dimColor>{ageLabel(p.mtimeMs, now)}</Text>
206            </Button>
207          ))}
208        </Box>
209        {loadedAt > 0 && <Text dimColor>{`${shown.length} / ${list.length} 件 ・ 読込 ${dateLabel(loadedAt).slice(11)}`}</Text>}
210      </Box>
211    )
212  })
213}
214

1// 読み込み結果を表示用データにする純関数と、SVG を組む関数。fs も $ も触らない
2import type { ProjectBoardProject, ProjectBoardSort } from '../types'
3import { C, HEADER_H, fadeIn, frame, growBar, header } from './style'
4
5const DAY = 86_400_000
6
7// 本文に CR やタブ以外の制御文字が残ると Markdown/Text の検証で木ごと落ちる
8export const normalize = (text: string) =>
9  text.replace(/\r\n?/g, '\n').replace(/[\x00-\x08\x0b-\x1f\x7f]/g, '')
10
11// 箇条書きの印・強調・コード・リンクを外して 1 行の文にする
12const clean = (line: string) =>
13  line
14    .replace(/^\s*(?:[-*+]|\d+[.)])\s+(?:\[[ xX]\]\s+)?/, '')
15    .replace(/\*\*|__|`/g, '')
16    .replace(/\[\[(?:[^\]|]*\|)?([^\]]*)\]\]/g, '$1')
17    .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
18    .replace(/\s+/g, ' ')
19    .trim()
20
21const cut = (s: string, n: number) => (s.length > n ? `${s.slice(0, n - 1)}…` : s)
22
23// 引き継ぎメモの書き方(実物 20 本で多い形):
24// 「状態: ...」行 / 「## 現状」「## 今どこにいるか」の箇条書き / 「## 次にやること」の番号付き / 「待ち」「未確認」「宿題」を含む行
25export const extractLines = (text: string): string[] => {
26  let h2 = ''
27  let section = ''
28  let status = ''
29  let now = ''
30  let todo = ''
31  let wait = ''
32  const plain: string[] = []
33  for (const raw of text.split('\n')) {
34    const heading = /^(#{1,6})\s+(.*)$/.exec(raw)
35    if (heading) {
36      // ### は上の ## と合わせて見る(「## 現状」の下が「### Phase1」で始まるメモがある)
37      const text = heading[2] ?? ''
38      if ((heading[1] ?? '').length <= 2) h2 = text
39      section = (heading[1] ?? '').length <= 2 ? text : `${h2} ${text}`
40      continue
41    }
42    if (/^\s*\|/.test(raw) || /^\s*(?:```|---|>)/.test(raw)) continue
43    const line = clean(raw)
44    if (line === '' || /^最終更新\s*[:：]/.test(line)) continue
45    if (!status && /^状態\s*[:：]/.test(line)) status = line
46    else if (!now && /現状|今どこ/.test(section)) now = line
47    else if (!todo && /次に|次の|TODO/i.test(section)) todo = `次: ${line}`
48    else if (!wait && /待ち|未確認|宿題/.test(line)) wait = line
49    if (plain.length < 2) plain.push(line)
50  }
51  const found = [...new Set([status, now, todo, wait].filter(s => s !== ''))]
52  return (found.length > 0 ? found : plain).map(s => cut(s, 80))
53}
54
55export const toProject = (fileName: string, path: string, mtimeMs: number, text: string): ProjectBoardProject => {
56  const body = normalize(text)
57  const title = /^#\s+(.+)$/m.exec(body)?.[1]?.trim() ?? ''
58  // ファイル名にも制御文字が入りうる(Text の子や SVG に入れると木ごと拒まれる)
59  const name = fileName.replace(/\.md$/i, '').replace(/[\x00-\x1f\x7f]/g, '')
60  return { name, path, mtimeMs, title: cut(clean(title), 80), lines: extractLines(body) }
61}
62
63export const arrange = (list: readonly ProjectBoardProject[], sort: ProjectBoardSort, filter: string) => {
64  const q = filter.trim().toLowerCase()
65  const hit = q === '' ? [...list] : list.filter(p => p.name.toLowerCase().includes(q))
66  if (sort === 'name') return hit.sort((a, b) => a.name.localeCompare(b.name, 'ja'))
67  if (sort === 'old') return hit.sort((a, b) => a.mtimeMs - b.mtimeMs)
68  return hit.sort((a, b) => b.mtimeMs - a.mtimeMs)
69}
70
71export const ageDays = (mtimeMs: number, now: number) => Math.max(0, Math.floor((now - mtimeMs) / DAY))
72
73export const ageLabel = (mtimeMs: number, now: number) => {
74  const d = ageDays(mtimeMs, now)
75  if (d > 0) return `${d}日前`
76  const h = Math.floor(Math.max(0, now - mtimeMs) / 3_600_000)
77  return h > 0 ? `${h}時間前` : '1時間以内'
78}
79
80/** 鮮度の色。古い物は弱い色(呼ぶたびに今のテーマの色を引く) */
81export const freshColor = (days: number) => (days <= 3 ? C.green : days <= 14 ? C.yellow : C.dim)
82
83export const dateLabel = (ms: number) => {
84  const d = new Date(ms)
85  const p = (n: number) => String(n).padStart(2, '0')
86  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
87}
88
89// vault の根の下にあるときだけ obsidian:// を作る。外なら undefined
90export const obsidianUrl = (path: string, vaultRoot: string, vaultName: string) => {
91  const norm = (s: string) => s.replace(/\\/g, '/').replace(/\/+$/, '')
92  const root = norm(vaultRoot)
93  // 未設定なら作らない (空の根は "/" から始まる全部に当たってしまう)
94  if (root === '' || vaultName === '') return undefined
95  const file = norm(path)
96  if (!file.toLowerCase().startsWith(`${root.toLowerCase()}/`)) return undefined
97  return `obsidian://open?vault=${encodeURIComponent(vaultName)}&file=${encodeURIComponent(file.slice(root.length + 1))}`
98}
99
100const esc = (s: string) =>
101  s
102    .replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, '')
103    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
104
105// 文字幅の目安: 半角 0.55、それ以外 1(font-size 倍)
106const width = (s: string) => [...s].reduce((w, c) => w + (c.charCodeAt(0) < 0x80 ? 0.55 : 1), 0)
107
108const fit = (s: string, units: number) => {
109  if (width(s) <= units) return s
110  let out = ''
111  for (const c of s) {
112    if (width(out + c) > units - 1) break
113    out += c
114  }
115  return `${out}…`
116}
117
118// 幅 units に収まるよう折り返す。rows 行を超えたら最後を … で切る
119const wrap = (s: string, units: number, rows: number) => {
120  const out: string[] = []
121  let line = ''
122  for (const c of s) {
123    if (width(line + c) > units) {
124      out.push(line)
125      line = c
126    } else line += c
127  }
128  out.push(line)
129  if (out.length <= rows) return out
130  const kept = out.slice(0, rows)
131  kept[rows - 1] = fit(`${kept[rows - 1] ?? ''}${out[rows] ?? ''}`, units)
132  return kept
133}
134
135// 鮮度のグラフに並べる上限。Svg の source は 131072 字までなので、多いと残りは「ほか N 件」にまとめる
136export const FRESH_ROWS = 100
137
138// 一覧の上の「鮮度」横棒グラフ
139export const freshnessSvg = (all: readonly ProjectBoardProject[], now: number) => {
140  const ROW = 22
141  const TOP = HEADER_H + 30
142  const list = all.slice(0, FRESH_ROWS)
143  const rest = all.length - list.length
144  const h = TOP + Math.max(1, list.length) * ROW + (rest > 0 ? ROW : 0) + 12
145  const days = list.map(p => ageDays(p.mtimeMs, now))
146  const max = Math.max(14, ...days)
147  const X = 118
148  const W = 206
149  const legend = [
150    [freshColor(0), '3日以内'],
151    [freshColor(14), '14日以内'],
152    [freshColor(15), 'それ以上'],
153  ] as const
154  let out = header('鮮度', '最終更新からの日数', C.green)
155  legend.forEach(([c, t], i) => {
156    const lx = 14 + i * 84
157    out += `<rect x="${lx}" y="${HEADER_H + 10}" width="10" height="6" rx="2" fill="${c}"/>`
158    out += `<text x="${lx + 14}" y="${HEADER_H + 17}" fill="${C.dim}" font-size="12">${t}</text>`
159  })
160  list.forEach((p, i) => {
161    const y = TOP + i * ROW
162    const d = days[i] ?? 0
163    const w = Math.max(3, Math.round((d / max) * W))
164    // 動きは上の 20 本だけ(多いと source が重くなる)
165    const delay = i < 20 ? Number((0.1 + i * 0.04).toFixed(2)) : -1
166    out += `<text x="14" y="${y + 15}" fill="${C.text}" font-size="12">${esc(fit(p.name, 8.5))}</text>`
167    out += `<rect x="${X}" y="${y + 5}" width="${W}" height="12" rx="3" fill="${C.face}"/>`
168    out +=
169      delay < 0
170        ? `<rect x="${X}" y="${y + 5}" width="${w}" height="12" rx="3" fill="${freshColor(d)}"/>`
171        : growBar(X, y + 5, w, 12, freshColor(d), delay)
172    out += `<text x="${X + w + 6}" y="${y + 15}" fill="${C.dim}" font-size="12">${d}日</text>`
173  })
174  if (rest > 0) out += `<text x="14" y="${TOP + list.length * ROW + 15}" fill="${C.dim}" font-size="12">ほか ${rest} 件</text>`
175  return frame(h, out)
176}
177
178// 詳細画面のカード: 名前・更新日・抜き出した行
179export const cardSvg = (p: ProjectBoardProject, now: number) => {
180  const rows = p.lines.slice(0, 4).map(l => wrap(l, 24, 2))
181  const body = rows.reduce((n, r) => n + r.length * 18 + 8, 0)
182  // 先頭の見出しが名前と違えば名前の下に弱い文字で出す
183  const sub = p.title !== '' && p.title !== p.name ? p.title : ''
184  const o = sub ? 18 : 0
185  const top = HEADER_H + 8
186  const h = top + 42 + o + Math.max(28, body)
187  const d = ageDays(p.mtimeMs, now)
188  let out = header(fit(p.name, 20), ageLabel(p.mtimeMs, now), freshColor(d))
189  if (sub) out += `<text x="14" y="${top + 16}" fill="${C.dim}" font-size="12">${esc(fit(sub, 28))}</text>`
190  out += `<text x="14" y="${top + 18 + o}" fill="${C.dim}" font-size="12">更新 ${dateLabel(p.mtimeMs)}</text>`
191  out += `<line x1="14" y1="${top + 30 + o}" x2="366" y2="${top + 30 + o}" stroke="${C.line}"/>`
192  let y = top + 52 + o
193  if (rows.length === 0) out += `<text x="14" y="${y}" fill="${C.dim}" font-size="12">状態の行は見つかりませんでした</text>`
194  rows.forEach((r, i) => {
195    let s = `<circle cx="18" cy="${y - 4}" r="3" fill="${C.blue}"/>`
196    for (const t of r) {
197      s += `<text x="28" y="${y}" fill="${C.text}" font-size="13">${esc(t)}</text>`
198      y += 18
199    }
200    out += fadeIn(s, Number((0.15 + i * 0.08).toFixed(2)))
201    y += 8
202  })
203  return frame(h, out)
204}
205

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// project-board の $.state の契約
2export type ProjectBoardProject = {
3  /** ファイル名から .md を除いた物 = プロジェクト名 */
4  name: string
5  /** メモの絶対パス */
6  path: string
7  mtimeMs: number
8  /** 本文の先頭の # 見出し */
9  title: string
10  /** 「状態」「現状」「次にやること」「待ち」などから抜いた行(最大 4) */
11  lines: string[]
12}
13
14export type ProjectBoardSort = 'new' | 'name' | 'old'
15
16export type ProjectBoardDetail = {
17  name: string
18  /** 表示する本文(先頭 4000 字、全文表示では上限 100000 字) */
19  body: string
20  /** まだ続きがある */
21  more: boolean
22}
23
24declare module 'claude-code' {
25  interface PluginState {
26    'project-board': {
27      projects: ProjectBoardProject[]
28      /** 最後に読み込んだ時刻。0 はまだ読んでいない */
29      loadedAt: number
30      /** 読み込みの失敗。空なら無し */
31      error: string
32      sort: ProjectBoardSort
33      filter: string
34      detail: ProjectBoardDetail | null
35    }
36  }
37}
38