prompt-book

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, PromptFilled, Register, Timer } from 'claude-code'
3
4import type { PromptBookDraft, PromptBookItem, PromptBookSort } from '../types'
5import { followTheme, mayWrite, readTheme, rememberVersion } from './style'
6import { SORTS, arrange, chartSvg, fromSaved, isSort, newId, parseTags, seeds, short, summaryLines, tagCounts, titleOf } from './book'
7
8const PANE = 'prompt-book'
9const TITLE = 'プロンプト帳'
10const DESCRIPTION = 'よく使う依頼文を保存して、ボタンで入力欄へ入れる'
11const STORE_KEY = 'items'
12const FLASH_MS = 2400
13const EMPTY_DRAFT: PromptBookDraft = { title: '', body: '', tags: '' }
14
15const ITEMS = atom({ plugin: 'prompt-book', key: 'items' } as const, [] as PromptBookItem[])
16const DRAFT = atom({ plugin: 'prompt-book', key: 'draft' } as const, EMPTY_DRAFT)
17const TAG = atom({ plugin: 'prompt-book', key: 'tag' } as const, '')
18const SORT = atom({ plugin: 'prompt-book', key: 'sort' } as const, 'uses' as PromptBookSort)
19const ARMED = atom({ plugin: 'prompt-book', key: 'armed' } as const, '')
20const NOTICE = atom({ plugin: 'prompt-book', key: 'notice' } as const, '')
21const FLASH = atom({ plugin: 'prompt-book', key: 'isFlashing' } as const, false)
22
23type $ = EngineInterface
24
25const say = ($: $, text: string) => update($, NOTICE, () => text)
26const STALE = '新しい版が入ったので保存していません。VS Code を開き直してください'
27
28// 同じ store を同時に開いた別のセッション (VS Code とターミナルなど) と分け合う。
29// 書く直前に store を読み直し、その一覧に今回の操作 (id で足す・数える・消す) だけを当てて書く
30type Fresh = { ok: true; items: PromptBookItem[] | undefined } | { ok: false }
31
32/** store の今の一覧。キーが無ければ items は undefined、読めない・配列でない時は ok: false */
33const readStore = async ($: $): Promise<Fresh> => {
34  try {
35    const raw = await $.store.get(STORE_KEY)
36    if (raw === undefined) return { ok: true, items: undefined }
37    const items = fromSaved(raw)
38    return items ? { ok: true, items } : { ok: false }
39  } catch {
40    return { ok: false }
41  }
42}
43
44// 1 セッションの中の書き込み (連打など) は 1 本ずつ流す
45let chain: Promise<unknown> = Promise.resolve()
46const serial = <T,>(f: () => Promise<T>): Promise<T> => {
47  const p = chain.then(f, f)
48  chain = p.catch(() => {})
49  return p
50}
51
52/** store の今の一覧に fn を当てて state と store に書く。読めなければ書かずに false */
53const change = ($: $, fn: (items: PromptBookItem[], now: number) => PromptBookItem[]) =>
54  serial(async () => {
55    const fresh = await readStore($)
56    if (!fresh.ok) {
57      await say($, '保存した一覧を読めなかったので保存しませんでした')
58      return false
59    }
60    const now = await $.clock.now()
61    // 新しい版が入ったのに古い版のまま動いている時は書かない (新しい版の欄を消さないように)
62    if (!(await mayWrite($, now))) {
63      await say($, STALE)
64      return false
65    }
66    const items = fn(fresh.items ?? [], now)
67    try {
68      await $.store.set(STORE_KEY, items)
69    } catch {
70      await say($, '保存できませんでした')
71      return false
72    }
73    await update($, ITEMS, () => items)
74    return true
75  })
76
77// ponytail: 光りを消すタイマーはモジュール変数。リロードで消えても光りが残るだけで、次の保存で消える
78let flashTimer: Timer | undefined
79
80async function save($: $, draft: PromptBookDraft) {
81  const body = draft.body.trim()
82  if (body === '') return say($, '本文を入れてください')
83  const title = titleOf(draft.title, body)
84  const isSaved = await change($, (items, now) => [...items, { id: newId(now), title, body, tags: parseTags(draft.tags), uses: 0, lastUsedAt: 0, createdAt: now }])
85  if (!isSaved) return
86  await update($, DRAFT, () => EMPTY_DRAFT)
87  await update($, ARMED, () => '')
88  await say($, `「${title}」を保存しました`)
89  await update($, FLASH, () => true)
90  flashTimer?.cancel()
91  flashTimer = $.clock.after(FLASH_MS, () => void update($, FLASH, () => false).catch(() => {}))
92}
93
94const fillNote = (title: string, r: PromptFilled | undefined) => {
95  if (r?.isFilled) return `「${title}」を入力欄に入れました(送信はしていません)`
96  if (r?.refusal === 'dialog') return '入力欄に入れられませんでした(ダイアログが開いています)'
97  if (r?.refusal === 'no_composer') return '入力欄に入れられませんでした(この画面には入力欄がありません)'
98  return '入力欄に入れられませんでした(VS Code では拒まれることがあります)'
99}
100
101async function use($: $, p: PromptBookItem) {
102  await update($, ARMED, () => '')
103  const r = await $.prompt.fill({ text: p.body, mode: 'insert' }).catch(() => undefined)
104  // 入った時だけ数える。数えた後に保存の失敗などを出したら、そちらを残す
105  if (r?.isFilled && !(await change($, (items, now) => items.map(x => (x.id === p.id ? { ...x, uses: x.uses + 1, lastUsedAt: Math.max(x.lastUsedAt, now) } : x)))))
106    return
107  await say($, fillNote(p.title, r))
108}
109
110/** 1 回目は「本当に消す」に変わるだけ。同じボタンをもう一度で消す */
111async function remove($: $, p: PromptBookItem) {
112  if ((await read($, ARMED)) !== p.id) {
113    await update($, ARMED, () => p.id)
114    return
115  }
116  await update($, ARMED, () => '')
117  if (await change($, items => items.filter(x => x.id !== p.id))) await say($, `「${p.title}」を消しました`)
118}
119
120/** 今の入力欄の中身を本文にして保存 (題・タグは追加欄のもの) */
121async function saveFromPrompt($: $) {
122  const box = await $.prompt.read().catch(() => ({ text: '' }))
123  if (box.text.trim() === '') return say($, '入力欄が空か、読めませんでした(VS Code では読めないことがあります)')
124  await save($, { ...(await read($, DRAFT)), body: box.text })
125}
126
127const setDraft = ($: $, field: keyof PromptBookDraft, value: string) => update($, DRAFT, d => ({ ...d, [field]: value }))
128
129async function load($: $) {
130  const fresh = await readStore($)
131  if (!fresh.ok) {
132    // 読めない間は state を空のままにし、書くたびに読み直す (空で上書きしない)
133    await say($, '保存した一覧を読めませんでした。開き直すと読み直します')
134    return
135  }
136  if (fresh.items !== undefined) {
137    await update($, ITEMS, () => fresh.items!)
138    return
139  }
140  // まだ何も保存していない時だけ例を入れる
141  await change($, (items, now) => (items.length === 0 ? seeds(now) : items))
142}
143
144const openPane = async ($: $) => {
145  await $.ui.open({ id: PANE, title: TITLE })
146  return { text: 'プロンプト帳を開きました。' }
147}
148
149// /prompts を自分で取れたか。取れなければ /prompts は組み込みに任せる (session.start はリロードでも来る)
150let ownsMain = false
151
152export const register: Register = on => {
153  followTheme(on)
154
155  on('session.start', async ($, e, next) => {
156    await readTheme($)
157    await rememberVersion($).catch(() => {})
158    // /prompts が拒まれたら (組み込みと被ったら) /prompt-book にする
159    const got = await $.command.register({ name: 'prompts', description: DESCRIPTION }).catch(() => undefined)
160    ownsMain = got?.command === 'prompts'
161    if (!ownsMain) await $.command.register({ name: 'prompt-book', description: DESCRIPTION }).catch(() => {})
162    await load($).catch(() => {})
163    return next(e)
164  })
165
166  on('command.run', { command: 'prompts' }, ($, e, next) => (ownsMain ? openPane($) : next(e))).catch(($, e, next) => next(e))
167  // /prompts を持てた時は /prompt-book を登録していないので、その名前の持ち主に回す
168  on('command.run', { command: 'prompt-book' }, ($, e, next) => (ownsMain ? next(e) : openPane($))).catch(($, e, next) => next(e))
169
170  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
171    const t = $.ui.resolve(e)
172    const { Box, Text, Button } = t
173    if (!('Select' in t)) return <Text dimColor>この画面ではプロンプト帳を出せません</Text>
174    const { Select, Input } = t
175    // terminal の表にも Svg の名前があるので、画面の種類でも分ける
176    const Svg = e.surface !== 'terminal' && 'Svg' in t ? t.Svg : undefined
177
178    const items = await read($, ITEMS)
179    const draft = await read($, DRAFT)
180    const sort = await read($, SORT)
181    const armed = await read($, ARMED)
182    const notice = await read($, NOTICE)
183    const isFlashing = await read($, FLASH)
184    const tags = tagCounts(items)
185    // 消して無くなったタグで絞ったままにしない
186    const tagRaw = await read($, TAG)
187    const tag = tags.some(x => x.tag === tagRaw) ? tagRaw : ''
188    const shown = arrange(items, sort, tag)
189    const lines = summaryLines(items)
190
191    return (
192      <Box flexDirection="column" gap={1}>
193        {Svg ? (
194          <Svg source={chartSvg(items, tag, isFlashing)} alt={lines.join('\n')} />
195        ) : (
196          <Box key="summary" flexDirection="column">
197            {lines.map((l, i) => (
198              <Text bold={i === 0}>{l}</Text>
199            ))}
200            {isFlashing && <Text color="success">保存しました</Text>}
201          </Box>
202        )}
203        {notice !== '' && (
204          <Box key="notice">
205            <Text color="warning">{notice}</Text>
206          </Box>
207        )}
208        <Box flexDirection="column">
209          <Select
210            key="tag"
211            label="タグ"
212            options={[{ value: '', label: 'すべて' }, ...tags.map(x => ({ value: x.tag, label: `${x.tag} (${x.count})` }))]}
213            value={tag}
214            onSelect={v => void update($, TAG, () => v)}
215          />
216          <Select key="sort" label="並び" options={SORTS} value={sort} onSelect={v => void (isSort(v) && update($, SORT, () => v))} />
217        </Box>
218        <Box flexDirection="column">
219          {shown.length === 0 && <Text dimColor>該当する依頼文がありません</Text>}
220          {shown.map(p => (
221            <Box key={`row:${p.id}`} flexDirection="row" flexWrap="wrap" gap={1}>
222              <Button key={`use:${p.id}`} plain onPress={() => void use($, p)}>
223                {short(p.title, 14)} <Text dimColor>{`${p.uses}回${p.tags.length > 0 ? ` ${p.tags.join(',')}` : ''}`}</Text>
224              </Button>
225              <Button key={`del:${p.id}`} dimColor={armed !== p.id} label={armed === p.id ? '本当に消す' : '消す'} onPress={() => void remove($, p)} />
226            </Box>
227          ))}
228        </Box>
229        <Box flexDirection="column">
230          <Text bold>追加</Text>
231          <Input
232            key="title"
233            label="題"
234            placeholder="空なら本文の頭"
235            value={draft.title}
236            onInput={v => void setDraft($, 'title', v)}
237            onSubmit={v => void setDraft($, 'title', v)}
238          />
239          <Input
240            key="body"
241            label="本文"
242            placeholder="入力欄へ入れる文"
243            value={draft.body}
244            onInput={v => void setDraft($, 'body', v)}
245            onSubmit={v => void setDraft($, 'body', v)}
246          />
247          <Input
248            key="tags"
249            label="タグ"
250            placeholder="カンマ区切りで 3 つまで"
251            value={draft.tags}
252            onInput={v => void setDraft($, 'tags', v)}
253            onSubmit={v => void setDraft($, 'tags', v)}
254          />
255          <Button key="save" label="保存" variant="primary" onPress={() => void (async () => save($, await read($, DRAFT)))()} />
256          <Button key="from-prompt" dimColor label="今の入力欄を保存" onPress={() => void saveFromPrompt($)} />
257        </Box>
258      </Box>
259    )
260  })
261}
262

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// 依頼文の並び・絞り込み・読み戻しと画面の SVG。$ に触らない純関数だけ置く
2import type { PromptBookItem, PromptBookSort } from '../types'
3import { C, countUp, esc, fadeIn, frame, growBar, header } from './style'
4
5export const MAX_TAGS = 3
6const MAX_TAG_LEN = 16
7const MAX_TITLE_LEN = 40
8/** SVG に並べるタグのチップの数。残りは「ほか N」にまとめる */
9const MAX_CHIPS = 30
10
11export const SORTS: readonly { value: PromptBookSort; label: string }[] = [
12  { value: 'uses', label: 'よく使う順' },
13  { value: 'new', label: '新しい順' },
14  { value: 'title', label: '題の順' },
15]
16
17export const isSort = (v: string): v is PromptBookSort => SORTS.some(s => s.value === v)
18
19export const short = (s: string, n: number) => (s.length > n ? `${s.slice(0, n - 1)}…` : s)
20
21/** カンマ区切り (読点・全角カンマも) を、重なりを除いて 3 つまで */
22export function parseTags(s: string): string[] {
23  const out: string[] = []
24  for (const raw of s.split(/[,、，]/)) {
25    const t = raw.trim().slice(0, MAX_TAG_LEN)
26    if (t !== '' && !out.includes(t)) out.push(t)
27  }
28  return out.slice(0, MAX_TAGS)
29}
30
31/** 題が空の時は本文の 1 行目から */
32export const titleOf = (title: string, body: string) =>
33  short(title.trim() !== '' ? title.trim() : (body.trim().split('\n')[0] ?? '').trim(), MAX_TITLE_LEN)
34
35export const newId = (now: number) => `p${now.toString(36)}${Math.random().toString(36).slice(2, 6)}`
36
37/** 初めて開いた時に入れておく例 */
38export function seeds(now: number): PromptBookItem[] {
39  const list: [string, string, string[]][] = [
40    ['続けて', '続けて', ['定番']],
41    ['テストを走らせる', 'テストを走らせて結果を教えて', ['テスト']],
42    ['レビュー', '今の変更をレビューして', ['レビュー']],
43    ['3 行で要約', 'ここまでを 3 行で要約して', ['定番', '要約']],
44    ['テストを書く', 'この関数にテストを書いて', ['テスト']],
45  ]
46  return list.map(([title, body, tags], i) => ({ id: `seed${i + 1}`, title, body, tags, uses: 0, lastUsedAt: 0, createdAt: now - i }))
47}
48
49const num = (v: unknown) => (typeof v === 'number' && Number.isFinite(v) && v >= 0 ? Math.floor(v) : 0)
50
51/** store から読んだ値を形を確かめて戻す。配列でなければ undefined (まだ保存が無い)。知らない欄はそのまま残す */
52export function fromSaved(v: unknown): PromptBookItem[] | undefined {
53  if (!Array.isArray(v)) return undefined
54  const out: PromptBookItem[] = []
55  for (const [i, x] of v.entries()) {
56    if (typeof x !== 'object' || x === null) continue
57    const r = x as Record<string, unknown>
58    if (typeof r.body !== 'string' || r.body.trim() === '') continue
59    const id = typeof r.id === 'string' && r.id !== '' && !out.some(o => o.id === r.id) ? r.id : `old${i}`
60    const tags = Array.isArray(r.tags) ? parseTags(r.tags.filter(t => typeof t === 'string').join(',')) : []
61    // 知らない欄 (新しい版が足した欄) は残す
62    out.push({
63      ...r,
64      id,
65      title: titleOf(typeof r.title === 'string' ? r.title : '', r.body),
66      body: r.body,
67      tags,
68      uses: num(r.uses),
69      lastUsedAt: num(r.lastUsedAt),
70      createdAt: num(r.createdAt),
71    })
72  }
73  return out
74}
75
76const byUses = (a: PromptBookItem, b: PromptBookItem) => b.uses - a.uses || b.lastUsedAt - a.lastUsedAt || a.title.localeCompare(b.title, 'ja')
77
78/** タグで絞って並べる。tag が空ならすべて */
79export function arrange(items: readonly PromptBookItem[], sort: PromptBookSort, tag: string): PromptBookItem[] {
80  const list = tag === '' ? [...items] : items.filter(p => p.tags.includes(tag))
81  if (sort === 'uses') return list.sort(byUses)
82  if (sort === 'new') return list.sort((a, b) => b.createdAt - a.createdAt)
83  return list.sort((a, b) => a.title.localeCompare(b.title, 'ja'))
84}
85
86/** よく使う上位 (1 回以上使った物だけ) */
87export const topUses = (items: readonly PromptBookItem[], n = 5) => items.filter(p => p.uses > 0).sort(byUses).slice(0, n)
88
89/** タグごとの件数。多い順、同じなら名前順 */
90export function tagCounts(items: readonly PromptBookItem[]): { tag: string; count: number }[] {
91  const m = new Map<string, number>()
92  for (const p of items) for (const t of p.tags) m.set(t, (m.get(t) ?? 0) + 1)
93  return [...m].map(([tag, count]) => ({ tag, count })).sort((a, b) => b.count - a.count || a.tag.localeCompare(b.tag, 'ja'))
94}
95
96/** terminal 向けの行 */
97export function summaryLines(items: readonly PromptBookItem[]): string[] {
98  const top = topUses(items)
99  const tags = tagCounts(items)
100  return [
101    `プロンプト帳 ${items.length} 件`,
102    ...(top.length === 0 ? ['よく使う: まだありません'] : top.map((p, i) => `${i + 1}. ${short(p.title, 18)} ${p.uses}回`)),
103    tags.length === 0 ? 'タグ: なし' : `タグ: ${tags.map(t => `${t.tag} ${t.count}`).join(' / ')}`,
104  ]
105}
106
107/** 上位の棒の色。テーマに付いていくよう、呼ぶたびに C から読む */
108const barColors = () => [C.blue, C.green, C.yellow, C.purple, C.orange]
109
110/** 12px の文字幅のおおよそ (全角 12、半角 7) */
111const textWidth = (s: string, size = 12) => [...s].reduce((w, c) => w + ((c.codePointAt(0) ?? 0) > 0xff ? size : size * 0.6), 0)
112
113/**
114 * 上によく使う 5 件の横棒、下にタグごとの件数のチップ。
115 * isFlashing の間は右上に「保存しました」が光る (保存のたびに source が変わるのでアニメは頭から)
116 */
117export function chartSvg(items: readonly PromptBookItem[], selectedTag: string, isFlashing: boolean): string {
118  const W = 380
119  const pad = 16
120  const parts: string[] = []
121  const top = topUses(items)
122  const max = Math.max(1, ...top.map(p => p.uses))
123  const colors = barColors()
124
125  // 光っている間は右上を「保存しました」に譲る
126  parts.push(header('プロンプト帳', isFlashing ? '' : `${items.length} 件`, C.blue))
127
128  let y = 66
129  parts.push(`<text x="${pad}" y="${y}" font-size="12" fill="${C.dim}">よく使う上位 ${top.length} 件</text>`)
130  y += 10
131  if (top.length === 0) {
132    parts.push(`<text x="${pad}" y="${y + 18}" font-size="13" fill="${C.dim}">まだ使った依頼文はありません</text>`)
133    y += 32
134  }
135  const barX = 168
136  const barMax = W - pad - barX - 34
137  top.forEach((p, i) => {
138    const w = Math.max(4, Math.round((p.uses / max) * barMax))
139    const color = colors[i % colors.length]!
140    const cy = y + 6 + i * 28
141    parts.push(
142      `<text x="${pad}" y="${cy + 12}" font-size="13" fill="${C.text}">${esc(short(p.title, 11))}</text>`,
143      `<rect x="${barX}" y="${cy}" width="${barMax}" height="16" rx="4" fill="${C.face}"/>`,
144      growBar(barX, cy, w, 16, color, i * 0.1),
145      countUp(p.uses, `x="${W - pad}" y="${cy + 13}" font-size="12" fill="${C.dim}" text-anchor="end"`, n => `${n}回`, i * 0.1),
146    )
147  })
148  y += top.length * 28 + 22
149
150  const tags = tagCounts(items)
151  parts.push(`<text x="${pad}" y="${y}" font-size="12" fill="${C.dim}">タグごとの件数</text>`)
152  y += 10
153  if (tags.length === 0) {
154    parts.push(`<text x="${pad}" y="${y + 18}" font-size="13" fill="${C.dim}">タグはまだありません</text>`)
155    y += 30
156  } else {
157    let x = pad
158    const shown = tags.slice(0, MAX_CHIPS)
159    const rest = tags.length - shown.length
160    const chips = [...shown.map(t => ({ label: `${short(t.tag, 10)} ${t.count}`, isOn: t.tag === selectedTag })), ...(rest > 0 ? [{ label: `ほか ${rest}`, isOn: false }] : [])]
161    chips.forEach(({ label, isOn }, i) => {
162      const w = Math.ceil(textWidth(label)) + 18
163      if (x + w > W - pad && x > pad) {
164        x = pad
165        y += 30
166      }
167      // チップは少しずつずらして出す (多い時も 0.4 秒で出そろう)
168      parts.push(
169        fadeIn(
170          `<rect x="${x}" y="${y}" width="${w}" height="22" rx="11" fill="${isOn ? C.blue : C.face}" stroke="${isOn ? C.blue : C.line}"/>` +
171            `<text x="${x + w / 2}" y="${y + 15}" font-size="12" fill="${isOn ? C.bg : C.text}" text-anchor="middle">${esc(label)}</text>`,
172          0.3 + Math.min(i, 10) * 0.04,
173        ),
174      )
175      x += w + 6
176    })
177    y += 34
178  }
179
180  if (isFlashing) {
181    parts.push(
182      `<defs><filter id="glow" x="-30%" y="-80%" width="160%" height="260%"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>`,
183      `<g filter="url(#glow)">`,
184      `<rect x="${W - pad - 128}" y="8" width="128" height="28" rx="14" fill="${C.face}" stroke="${C.green}" stroke-width="2">`,
185      `<animate attributeName="stroke-width" values="2;5;2" dur="0.8s" repeatCount="3"/>`,
186      `</rect>`,
187      `<text x="${W - pad - 64}" y="27" font-size="13" font-weight="bold" fill="${C.green}" text-anchor="middle">保存しました</text>`,
188      `<animate attributeName="opacity" values="0;1;1;1;0.85" dur="2.4s" fill="freeze"/>`,
189      `</g>`,
190    )
191  }
192
193  return frame(y, parts.join(''))
194}
195

1// prompt-book の $.state の契約
2
3/** 保存した依頼文 1 件 ($.store にも同じ形で残す) */
4export type PromptBookItem = {
5  id: string
6  title: string
7  body: string
8  /** 0〜3 個 */
9  tags: string[]
10  /** 入力欄へ入れた回数 */
11  uses: number
12  /** 最後に入力欄へ入れた時刻 (ms)。まだなら 0 */
13  lastUsedAt: number
14  /** 保存した時刻 (ms) */
15  createdAt: number
16}
17
18/** 並び: よく使う順 / 新しい順 / 題の順 */
19export type PromptBookSort = 'uses' | 'new' | 'title'
20
21/** 追加欄に打ちかけの値 */
22export type PromptBookDraft = {
23  title: string
24  body: string
25  /** カンマ区切り */
26  tags: string
27}
28
29declare module 'claude-code' {
30  interface PluginState {
31    'prompt-book': {
32      items: PromptBookItem[]
33      draft: PromptBookDraft
34      /** 絞り込むタグ。空ならすべて */
35      tag: string
36      sort: PromptBookSort
37      /** 「消す」を 1 回押した件の id。空なら無し */
38      armed: string
39      /** 最後の操作の結果 (空なら出さない) */
40      notice: string
41      /** 「保存しました」を光らせている間 true */
42      isFlashing: boolean
43    }
44  }
45}
46