mod-hub

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { ModHubCommand, ModHubRecent, ModHubSort } from '../types'
5import { applyFilter, asPins, asRecent, byCategory, clean, headerSvg, launchers, noteMod, pushRecent, sortRecent, splitPins } from './hub'
6import type { Launcher } from './hub'
7import { bandSvg, categoryColor, modIcon } from './icons'
8import { C, followTheme, mayWrite, readTheme, rememberVersion, season } from './style'
9
10const PANE = 'mod-hub'
11const TITLE = 'mod'
12
13const MODS = atom({ plugin: 'mod-hub', key: 'mods' } as const, [])
14const COMMANDS = atom({ plugin: 'mod-hub', key: 'commands' } as const, [])
15const NOTICE = atom({ plugin: 'mod-hub', key: 'notice' } as const, '')
16const SORT = atom({ plugin: 'mod-hub', key: 'sort' } as const, 'category' as ModHubSort)
17const FILTER = atom({ plugin: 'mod-hub', key: 'filter' } as const, '')
18const PINS = atom({ plugin: 'mod-hub', key: 'pins' } as const, [] as string[])
19const RECENT = atom({ plugin: 'mod-hub', key: 'recent' } as const, [] as ModHubRecent[])
20
21const SORTS: ModHubSort[] = ['category', 'name', 'recent']
22const SORT_LABEL: Record<ModHubSort, string> = { category: '並び: カテゴリー別', name: '並び: 名前順', recent: '並び: 最近開いた順' }
23
24const BROKEN = '保存した記録を読めなかったので、保存していません(上書きしないよう止めています)'
25const STALE = '新しい版が入ったので保存していません。VS Code を開き直してください'
26
27/** store のキーを読む。キーが無ければ empty、読めない時 (例外・形が違う) は undefined */
28async function readKey<T>($: EngineInterface, key: string, as: (v: unknown) => T | undefined, empty: T): Promise<T | undefined> {
29  try {
30    const raw = await $.store.get(key)
31    return raw === undefined ? empty : as(raw)
32  } catch {
33    return undefined
34  }
35}
36
37/** 書いてよいか。古い版のまま動いている時は書かずに知らせる (このセッションの中では効かせる) */
38async function canWrite($: EngineInterface) {
39  if (await mayWrite($, await $.clock.now())) return true
40  await update($, NOTICE, () => STALE)
41  return false
42}
43
44// 並べ方を順に回し、次のセッションにも残す(残せなくてもこのセッションでは効く)
45async function toggleSort($: EngineInterface) {
46  let next: ModHubSort = 'category'
47  await update($, SORT, s => (next = SORTS[(SORTS.indexOf(s) + 1) % SORTS.length] ?? 'category'))
48  if (await canWrite($)) await $.store.set('sort', next).catch(() => {})
49}
50
51// 固定する・外す。$.store は他のセッションと共有なので、書く直前に読み直して 1 本だけ足す・抜く。
52// 読めない時は、このセッションの中だけで固定する (store は上書きしない)
53async function setPin($: EngineInterface, name: string, on: boolean) {
54  const pin = (list: readonly string[]) => (on ? [...list.filter(n => n !== name), name] : list.filter(n => n !== name))
55  const saved = await readKey($, 'pins', asPins, [])
56  if (!saved) {
57    await update($, PINS, pin)
58    return void (await update($, NOTICE, () => BROKEN))
59  }
60  const next = pin(saved)
61  await update($, PINS, () => next)
62  if (await canWrite($)) await $.store.set('pins', next).catch(() => {})
63}
64
65// 開いた記録を残す(同じく書く直前に読み直す)
66async function noteRecent($: EngineInterface, name: string) {
67  const at = await $.clock.now()
68  const saved = await readKey($, 'recent', asRecent, [])
69  if (!saved) return void (await update($, RECENT, list => pushRecent(list, name, at)))
70  const next = pushRecent(saved, name, at)
71  await update($, RECENT, () => next)
72  if (await canWrite($)) await $.store.set('recent', next).catch(() => {})
73}
74
75async function loadCommands($: EngineInterface) {
76  const list = await $.command.list()
77  const mine: ModHubCommand[] = list
78    .filter(c => c.source === 'plugin' && c.plugin !== undefined)
79    .map(c => ({ name: c.name, description: clean(c.description), plugin: c.plugin ?? '' }))
80  await update($, COMMANDS, () => mine)
81}
82
83async function runCommand($: EngineInterface, mod: string, command: string) {
84  await noteRecent($, mod).catch(() => {})
85  await update($, NOTICE, () => `/${command} を送りました(セッションが空いたら開きます)`)
86  try {
87    await $.command.run({ command })
88  } catch {
89    await update($, NOTICE, () => `/${command} を送れませんでした`)
90  }
91}
92
93// /mod (取れなければ /mod-hub) の答え。起動直後はまだ無いコマンドがあるので開くたびに取り直す
94async function openPane($: EngineInterface) {
95  await loadCommands($).catch(() => {})
96  await $.ui.open({ id: PANE, title: TITLE })
97  return { text: 'mod の一覧を開きました。' }
98}
99
100const short = (s: string, n: number) => (s.length > n ? `${s.slice(0, n - 1)}…` : s)
101
102// /mod を持てたか。session.start で決まる(リロードでも session.start が来るのでモジュール変数で足りる)
103let ownsMain = false
104
105export const register: Register = on => {
106  followTheme(on)
107
108  // 自分より後に読み込まれる mod を 1 本ずつ見て、画面を持つかを覚える (止めはしない)
109  // 後ろの mod に拒まれた mod は並べない(next(e) の結果が allow の時だけ記録)
110  on('plugin.register', async ($, e, next) => {
111    const result = await next(e)
112    const mod = noteMod(e, result)
113    await update($, MODS, list => [...list.filter(m => m.name !== e.name), ...(mod ? [mod] : [])]).catch(() => {})
114    return result
115  })
116
117  on('session.start', async ($, e, next) => {
118    await rememberVersion($).catch(() => {})
119    // /mod が拒まれたら (組み込みと被ったら) /mod-hub にする
120    const description = '画面のある mod を開くボタンを並べる'
121    const got = await $.command.register({ name: 'mod', description }).catch(() => undefined)
122    ownsMain = got?.command === 'mod'
123    if (!ownsMain) await $.command.register({ name: 'mod-hub', description }).catch(() => {})
124    await loadCommands($).catch(() => {})
125    await readTheme($)
126    const saved = await $.store.get('sort').catch(() => undefined)
127    if (SORTS.includes(saved as ModHubSort)) await update($, SORT, () => saved as ModHubSort)
128    const pins = asPins(await $.store.get('pins').catch(() => undefined))
129    if (pins) await update($, PINS, () => pins)
130    const recent = asRecent(await $.store.get('recent').catch(() => undefined))
131    if (recent) await update($, RECENT, () => recent)
132    return next(e)
133  })
134
135  // /mod を持てなかった時は元の /mod を横取りしない
136  on('command.run', { command: 'mod' }, ($, e, next) => (ownsMain ? openPane($) : next(e))).catch(($, e, next) => next(e))
137  // /mod を持てた時は /mod-hub を登録していないので、その名前の持ち主に回す
138  on('command.run', { command: 'mod-hub' }, ($, e, next) => (ownsMain ? next(e) : openPane($))).catch(($, e, next) => next(e))
139
140  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
141    const t = $.ui.resolve(e)
142    const { Box, Text, Button } = t
143    // terminal の表にも Svg の名前があるので、画面の種類でも分ける
144    const Svg = e.surface !== 'terminal' && 'Svg' in t ? t.Svg : undefined
145    const Input = 'Input' in t ? t.Input : undefined
146
147    const all = launchers(await read($, MODS), await read($, COMMANDS))
148    const notice = await read($, NOTICE)
149    const sort = await read($, SORT)
150    const pins = await read($, PINS)
151    const filter = Input ? await read($, FILTER) : ''
152    // 見出しの季節の飾り (JST の月から。時計が読めなければ飾り無し)
153    const seasonNow = Svg ? await $.clock.now().then(season, () => undefined) : undefined
154
155    const shown = applyFilter(all, filter)
156    const { pinned, rest } = splitPins(sort === 'recent' ? sortRecent(shown, await read($, RECENT)) : shown, pins)
157
158    const card = (l: Launcher) => {
159      const isPinned = pins.includes(l.name)
160      return (
161        <Box key={`card:${l.name}`} flexDirection="column">
162          <Box key={`head:${l.name}`} flexDirection="row" gap={1} alignItems="center">
163            {Svg && <Svg source={modIcon(l.name)} alt={`${l.name} のアイコン`} width={28} />}
164            <Text bold>{l.name}</Text>
165            {l.version !== '' && <Text dimColor>{`v${l.version}`}</Text>}
166          </Box>
167          {l.commands.map(c => (
168            <Button key={`run:${l.name}:${c.name}`} onPress={() => void runCommand($, l.name, c.name)}>
169              {`/${c.name}`} <Text dimColor>{short(c.description, 22)}</Text>
170            </Button>
171          ))}
172          <Button key={`pin:${l.name}`} dimColor onPress={() => void setPin($, l.name, !isPinned)}>
173            <Text dimColor>{isPinned ? '外す' : '固定'}</Text>
174          </Button>
175        </Box>
176      )
177    }
178
179    // 色の帯の見出し (terminal は色付きの文字)
180    const group = (label: Parameters<typeof categoryColor>[0], items: Launcher[]) => (
181      <Box key={`group:${label}`} flexDirection="column" gap={1}>
182        {Svg ? (
183          <Svg source={bandSvg(label, items.length)} alt={`${label} ${items.length} 本`} />
184        ) : (
185          <Text bold color={categoryColor(label)}>{`${label} (${items.length})`}</Text>
186        )}
187        {items.map(card)}
188      </Box>
189    )
190
191    return (
192      <Box flexDirection="column" gap={1}>
193        {Svg ? (
194          <Svg source={headerSvg(all.length, seasonNow)} alt={`画面のある mod ${all.length} 本`} />
195        ) : (
196          <Text bold>{`画面のある mod ${all.length} 本`}</Text>
197        )}
198        {notice !== '' && <Text color={C.yellow}>{notice}</Text>}
199        {all.length === 0 && <Text dimColor>開ける mod が見つかりません(mod-hub より後に読み込まれる mod だけが並びます)</Text>}
200        {all.length > 0 && Input && (
201          <Input
202            key="filter"
203            placeholder="名前や説明で絞る"
204            value={filter}
205            submitLabel="絞る"
206            onInput={v => void update($, FILTER, () => v)}
207            onSubmit={v => void update($, FILTER, () => v)}
208          />
209        )}
210        {all.length > 0 && (
211          <Button key="sort" dimColor onPress={() => void toggleSort($)}>
212            <Text>{SORT_LABEL[sort]}</Text> <Text dimColor>押して切り替え</Text>
213          </Button>
214        )}
215        {all.length > 0 && shown.length === 0 && <Text dimColor>一致する mod がありません</Text>}
216        {pinned.length > 0 && group('固定', pinned)}
217        {sort === 'category' ? byCategory(rest).map(g => group(g.category, g.items)) : rest.map(card)}
218      </Box>
219    )
220  })
221}
222

1// 起動ボタンの一覧とヘッダーの SVG。$ に触らない純関数だけ置く
2import type { ModHubCommand, ModHubMod, ModHubRecent } from '../types'
3import { C, clean, frame, header } from './style'
4import type { Season } from './style'
5
6export { clean }
7
8export const SELF = 'mod-hub'
9
10/** 画面を持つ mod: ペインを開くか、何かを描く */
11export const isGui = (events: readonly string[], calls: readonly string[]) => calls.includes('ui.open') || events.includes('ui.render')
12
13/** plugin.register の next(e) の結果が allow の時だけ記録する物を返す(後ろの mod に拒まれた mod は並べない) */
14export function noteMod(
15  e: { name: string; version?: string; uses: { events: readonly string[]; calls: readonly string[] } },
16  result: { allow?: true; refuse?: string },
17): ModHubMod | undefined {
18  if (result.allow !== true) return undefined
19  return { name: e.name, version: clean(e.version ?? ''), isGui: isGui(e.uses.events, e.uses.calls) }
20}
21
22/** 並べるカテゴリーの順。表に無い mod (よそで作られた物) は最後の「その他」 */
23export const CATEGORIES = ['開発', '状況', '道具', '遊び', 'その他'] as const
24export type Category = (typeof CATEGORIES)[number]
25
26// ponytail: このリポジトリの mod だけを名前で引く。よその mod にも分けたくなったら plugin.json から読む
27const CATEGORY: Record<string, Category> = {
28  'git-pane': '開発', 'edit-log': '開発', 'todo-board': '開発', 'test-runner': '開発', 'pre-check': '開発',
29  'ci-pane': '開発', 'port-watch': '開発', 'spec-board': '開発', 'project-board': '開発', 'fail-log': '開発',
30  'ship-guard': '開発', 'rule-watch': '開発', 'enc-guard': '開発', 'release-draft': '開発',
31  'cc-dash': '状況', 'token-meter': '状況', 'usage-pane': '状況', 'agent-watch': '状況', 'session-recap': '状況',
32  'devlog-pane': '状況', 'work-bar': '状況', 'session-timeline': '状況', 'file-map': '状況', 'usage-history': '状況',
33  'compact-cue': '状況',
34  'focus-timer': '道具', 'prompt-book': '道具', 'rule-switch': '道具', 'canvas-pane': '道具', 'done-chime': '道具',
35  'toast-inbox': '道具', 'mod-check': '道具',
36  'aqua-pet': '遊び', 'face-band': '遊び', 'turn-haiku': '遊び', 'live-commentary': '遊び', 'turn-gacha': '遊び',
37  'dev-rpg': '遊び', 'code-omikuji': '遊び', 'wait-games': '遊び', 'daily-quest': '遊び', 'trophy-shelf': '遊び',
38  'run-guard': '開発',
39  'week-card': '遊び',
40}
41export const categoryOf = (name: string): Category => CATEGORY[name] ?? 'その他'
42/** 表に載っている mod の名前 (アイコンが揃っているかの試験で回す) */
43export const KNOWN_MODS = Object.keys(CATEGORY)
44
45export type Launcher = { name: string; version: string; category: Category; commands: ModHubCommand[] }
46
47const baseName = (plugin: string) => plugin.split('@')[0] ?? plugin
48
49/** 画面を持ち、コマンドで開ける mod だけを名前順に (自分は除く) */
50export function launchers(mods: readonly ModHubMod[], commands: readonly ModHubCommand[]): Launcher[] {
51  return mods
52    .filter(m => m.isGui && m.name !== SELF)
53    .map(m => ({
54      name: m.name,
55      version: m.version,
56      category: categoryOf(m.name),
57      commands: commands.filter(c => baseName(c.plugin) === m.name),
58    }))
59    .filter(l => l.commands.length > 0)
60    .sort((a, b) => a.name.localeCompare(b.name))
61}
62
63/** カテゴリーの順に分ける (中は名前順のまま)。空のカテゴリーは出さない */
64export const byCategory = (list: readonly Launcher[]) =>
65  CATEGORIES.map(category => ({ category, items: list.filter(l => l.category === category) })).filter(g => g.items.length > 0)
66
67/** 名前・コマンド名・説明の部分一致で絞る (大文字小文字は見ない)。空なら全部 */
68export function applyFilter(list: readonly Launcher[], query: string): Launcher[] {
69  const q = query.trim().toLowerCase()
70  if (q === '') return [...list]
71  const hit = (s: string) => s.toLowerCase().includes(q)
72  return list.filter(l => hit(l.name) || l.commands.some(c => hit(c.name) || hit(c.description)))
73}
74
75/** 最近開いた順。開いたことの無い mod は後ろに名前順 (list は名前順で来る) */
76export function sortRecent(list: readonly Launcher[], recent: readonly ModHubRecent[]): Launcher[] {
77  const at = new Map(recent.map(r => [r.name, r.at]))
78  return [...list].sort((a, b) => (at.get(b.name) ?? -Infinity) - (at.get(a.name) ?? -Infinity) || a.name.localeCompare(b.name))
79}
80
81/** 固定した物と残りに分ける (並びは list のまま) */
82export const splitPins = (list: readonly Launcher[], pins: readonly string[]) => ({
83  pinned: list.filter(l => pins.includes(l.name)),
84  rest: list.filter(l => !pins.includes(l.name)),
85})
86
87export const RECENT_MAX = 20
88
89/** 開いた記録を先頭に足す (同じ名前の古い記録は抜く。その知らない欄は新しい記録に残す) */
90export const pushRecent = (recent: readonly ModHubRecent[], name: string, at: number): ModHubRecent[] =>
91  [{ ...recent.find(r => r.name === name), name, at }, ...recent.filter(r => r.name !== name)].slice(0, RECENT_MAX)
92
93/** $.store から読んだ物の形を確かめる。違えば undefined */
94export const asPins = (v: unknown): string[] | undefined =>
95  Array.isArray(v) && v.every(x => typeof x === 'string') ? (v as string[]) : undefined
96
97/** 読んだ記録はそのまま (知らない欄も残す)。数で切るのは足す時 (pushRecent) だけ */
98export const asRecent = (v: unknown): ModHubRecent[] | undefined =>
99  Array.isArray(v) && v.every(x => typeof x?.name === 'string' && typeof x?.at === 'number') ? (v as ModHubRecent[]) : undefined
100
101/** 見出しの右下に置く季節の小さな飾り (中心 346,66・大きさ 30 ほど) */
102// 色は C から読むので、描くたびに作る (テーマに付いていく)
103const seasonDeco = (): Record<Season, string> => ({
104  // 桜の花がゆっくり回り、花びらが 1 枚落ちる
105  春:
106    `<g id="deco-spring"><g transform="translate(346 64)"><animateTransform attributeName="transform" type="rotate" values="0;72" additive="sum" dur="8s" repeatCount="indefinite"/>` +
107    [0, 72, 144, 216, 288].map(a => `<ellipse cx="0" cy="-6.5" rx="4.6" ry="6.5" fill="#f9a8c0" transform="rotate(${a})"/>`).join('') +
108    `<circle r="2.6" fill="#f2cc60"/></g>` +
109    `<ellipse cx="326" cy="60" rx="2.6" ry="1.6" fill="#f9a8c0"><animate attributeName="cy" values="56;84" dur="4s" repeatCount="indefinite"/><animate attributeName="opacity" values="1;0" dur="4s" repeatCount="indefinite"/></ellipse></g>`,
110  // 日の光がゆっくり回る
111  夏:
112    `<g id="deco-summer"><g><animateTransform attributeName="transform" type="rotate" values="0 346 66;45 346 66" dur="6s" repeatCount="indefinite"/>` +
113    [0, 45, 90, 135, 180, 225, 270, 315].map(a => `<path d="M346 52 V47" stroke="#f2cc60" stroke-width="2.4" stroke-linecap="round" transform="rotate(${a} 346 66)"/>`).join('') +
114    `</g><circle cx="346" cy="66" r="9" fill="#f2cc60"/></g>`,
115  // もみじが揺れる
116  秋:
117    `<g id="deco-autumn"><g><animateTransform attributeName="transform" type="rotate" values="-12 346 74;12 346 74;-12 346 74" dur="3s" repeatCount="indefinite"/>` +
118    `<path d="M346 50 L349 58 L356 54 L354 62 L362 63 L355 68 L358 73 L349 71 L347 78 L345 78 L343 71 L334 73 L337 68 L330 63 L338 62 L336 54 L343 58 Z" fill="#d9822b"/>` +
119    `<path d="M346 58 V82" stroke="#a0522d" stroke-width="1.4" stroke-linecap="round"/></g></g>`,
120  // 雪の結晶が回り、雪が降る
121  冬:
122    `<g id="deco-winter"><g><animateTransform attributeName="transform" type="rotate" values="0 346 66;60 346 66" dur="6s" repeatCount="indefinite"/>` +
123    [0, 60, 120].map(a => `<path d="M346 54 V78 M342 57 L346 60 L350 57 M342 75 L346 72 L350 75" stroke="${C.blue}" stroke-width="1.8" fill="none" stroke-linecap="round" transform="rotate(${a} 346 66)"/>`).join('') +
124    `</g>` +
125    [[318, 0], [370, 1.3], [330, 2.4]].map(([x, d]) => `<circle cx="${x}" cy="52" r="1.6" fill="${C.blue}"><animate attributeName="cy" values="50;84" dur="3.6s" begin="${d}s" repeatCount="indefinite"/></circle>`).join('') +
126    `</g>`,
127})
128
129/**
130 * ヘッダー: 見出しと本数、mod ごとの色の点が順に灯る。
131 * season を渡すと右下に季節の飾り (描く側が JST の今から決めて渡す。渡さなければ飾り無し)
132 */
133export function headerSvg(count: number, season?: Season): string {
134  const pad = 16
135  const colors = [C.blue, C.green, C.yellow, C.purple, C.orange, C.red]
136  const dots = Array.from({ length: Math.min(count, 12) }, (_, i) => {
137    const color = colors[i % colors.length]
138    return `<circle cx="${pad + 6 + i * 22}" cy="66" r="6" fill="${color}" opacity="0.25"><animate attributeName="opacity" values="0.25;1;0.25" dur="2.4s" begin="${(i * 0.2).toFixed(1)}s" repeatCount="indefinite"/></circle>`
139  }).join('')
140  return frame(
141    88,
142    header('mod ハブ', `画面のある mod ${count} 本`) +
143      (count > 0 ? dots : `<text x="${pad}" y="70" font-size="12" fill="${C.dim}">まだ見つかっていません</text>`) +
144      (season ? seasonDeco()[season] : ''),
145  )
146}
147

1// mod ごとの小さなアイコンと、カテゴリーの色の帯。$ に触らない純関数だけ置く
2// 色は描く時に C から読む(テーマを切り替えると C の中身が入れ替わるので、文字列を先に作って持たない)
3import { categoryOf } from './hub'
4import type { Category } from './hub'
5import { C, esc, frame, growBar } from './style'
6
7type Group = Category | '固定'
8
9/** カテゴリーの色 [主, 差し色] */
10const tones = (g: Group): [string, string] =>
11  ({
12    開発: [C.blue, C.green],
13    状況: [C.green, C.blue],
14    道具: [C.yellow, C.blue],
15    遊び: [C.purple, C.orange],
16    その他: [C.dim, C.blue],
17    固定: [C.orange, C.yellow],
18  })[g] as [string, string]
19
20/** 見出しの色 (Text の color にも使う) */
21export const categoryColor = (g: Group) => tones(g)[0]
22
23const line = (c: string, w = 2) => `fill="none" stroke="${c}" stroke-width="${w}" stroke-linecap="round" stroke-linejoin="round"`
24
25// mod 名 → 絵の中身 (32x32、c = 主の色、a = 差し色)。文字は使わない
26const ICONS: Record<string, (c: string, a: string) => string> = {
27  // 開発
28  'git-pane': (c, a) =>
29    `<path d="M11 11.5v9 M21 15.5c0 4-10 2-10 5" ${line(c)}/><circle cx="11" cy="9" r="2.5" ${line(c)}/><circle cx="11" cy="23" r="2.5" ${line(c)}/><circle cx="21" cy="13" r="2.5" fill="${a}"/>`,
30  'edit-log': (c, a) => `<path d="M9 6h10l4 4v16H9z M19 6v4h4" ${line(c)}/><path d="M12 15h8 M12 19h8 M12 23h5" ${line(a)}/>`,
31  'todo-board': (c, a) =>
32    `<rect x="7" y="7" width="7" height="7" rx="1.5" ${line(c)}/><path d="M8.8 10.5l1.6 1.6 2.6-3.2" ${line(a)}/><rect x="7" y="18" width="7" height="7" rx="1.5" ${line(c)}/><path d="M18 10.5h7 M18 21.5h7" ${line(c)}/>`,
33  'test-runner': (c, a) => `<path d="M12 6h8 M14 6v8l-5.5 9.5a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L18 14V6" ${line(c)}/><path d="M11 20h10" ${line(a)}/>`,
34  'pre-check': (c, a) => `<path d="M16 5l9 3.5v6.5c0 6-4 9.5-9 12c-5-2.5-9-6-9-12V8.5z" ${line(c)}/><path d="M12 16l3 3 5-6" ${line(a)}/>`,
35  'ci-pane': (c, a) => `<path d="M23.5 13a8 8 0 0 0-14.5-2.5 M8.5 19a8 8 0 0 0 14.5 2.5" ${line(c)}/><path d="M9 6v4.5h4.5 M23 26v-4.5h-4.5" ${line(a)}/>`,
36  'port-watch': (c, a) => `<path d="M12 5v6 M20 5v6" ${line(a)}/><path d="M8.5 11h15v4a7.5 7.5 0 0 1-15 0z M16 22.5V27" ${line(c)}/>`,
37  'spec-board': (c, a) =>
38    `<rect x="8" y="7" width="16" height="20" rx="2" ${line(c)}/><rect x="12" y="5" width="8" height="4" rx="1" fill="${c}"/><path d="M12 15h8 M12 19h8 M12 23h5" ${line(a)}/>`,
39  'project-board': (c, a) =>
40    `<rect x="6" y="7" width="5.5" height="18" rx="1.5" fill="${c}"/><rect x="13.25" y="7" width="5.5" height="12" rx="1.5" fill="${c}" opacity="0.65"/><rect x="20.5" y="7" width="5.5" height="7" rx="1.5" fill="${a}"/>`,
41  'fail-log': (c, a) => `<path d="M16 5L28 26H4z" ${line(c)}/><path d="M16 12v7" ${line(a, 2.5)}/><circle cx="16" cy="22.5" r="1.6" fill="${a}"/>`,
42  'ship-guard': (c, a) => `<path d="M16 26V10 M10 15.5l6-6 6 6" ${line(c, 2.5)}/><path d="M7 26h18" ${line(a, 2.5)}/>`,
43  'rule-watch': (c, a) => `<path d="M6 7h20v14H14l-6 5v-5H6z" ${line(c)}/><path d="M11 14l3.5 3.5 6.5-6.5" ${line(a, 2.5)}/>`,
44  'enc-guard': (c, a) => `<path d="M12 8l-6 8 6 8 M20 8l6 8-6 8" ${line(c, 2.5)}/><circle cx="16" cy="16" r="2.4" fill="${a}"/>`,
45  'release-draft': (c, a) => `<path d="M6 6h9l11 11-9 9L6 15z" ${line(c)}/><circle cx="11" cy="11" r="2" fill="${a}"/>`,
46  // 状況
47  'compact-cue': (c, a) => `<path d="M16 5a11 11 0 1 1-10.4 7.4" ${line(c, 2.5)}/><path d="M12 13l4 4 4-4 M16 17V9" ${line(a)}/>`,
48  'cc-dash': (c, a) => `<path d="M6 22a10 10 0 0 1 20 0" ${line(c, 2.5)}/><path d="M16 22l5.5-6.5" ${line(a)}/><circle cx="16" cy="22" r="2.2" fill="${c}"/>`,
49  'token-meter': (c, a) => `<path d="M8 10h16 M8 16h11" ${line(c, 3)}/><path d="M8 22h6" ${line(a, 3)}/>`,
50  'usage-pane': (c, a) => `<circle cx="16" cy="16" r="9.5" ${line(c)}/><path d="M16 16V6.5a9.5 9.5 0 0 1 9.5 9.5z" fill="${a}"/>`,
51  'agent-watch': (c, a) => `<path d="M4.5 16c3.5-7 19.5-7 23 0c-3.5 7-19.5 7-23 0z" ${line(c)}/><circle cx="16" cy="16" r="3.8" fill="${a}"/>`,
52  'session-recap': (c, a) => `<path d="M8 16a8.5 8.5 0 1 0 2.5-6" ${line(c)}/><path d="M10 5.5v4.5h4.5" ${line(c)}/><path d="M16.5 12v4.5l3 2" ${line(a)}/>`,
53  'devlog-pane': (c, a) => `<path d="M16 10c-3-2-6.5-2-10-1v15c3.5-1 7-1 10 1c3-2 6.5-2 10-1V9c-3.5-1-7-1-10 1z" ${line(c)}/><path d="M16 10v15" ${line(a)}/>`,
54  'work-bar': (c, a) => `<rect x="5" y="12" width="22" height="8" rx="4" ${line(c)}/><rect x="8" y="15" width="11" height="2" rx="1" fill="${a}"/>`,
55  'session-timeline': (c, a) =>
56    `<path d="M5 18h22" ${line(c)}/><circle cx="9" cy="18" r="2.6" fill="${c}"/><circle cx="16" cy="18" r="2.6" fill="${a}"/><circle cx="23" cy="18" r="2.6" fill="${c}"/><path d="M16 8v6" ${line(a)}/>`,
57  'file-map': (c, a) =>
58    `<rect x="6" y="6" width="10.5" height="20" rx="1.5" fill="${c}"/><rect x="18" y="6" width="8" height="9" rx="1.5" fill="${a}"/><rect x="18" y="16.5" width="8" height="9.5" rx="1.5" fill="${c}" opacity="0.6"/>`,
59  'usage-history': (c, a) => `<path d="M6 6v20h20" ${line(c)}/><path d="M10 21l4.5-5.5 4 3.5 6-8" ${line(a)}/>`,
60  // 道具
61  'focus-timer': (c, a) => `<circle cx="16" cy="18" r="8.5" ${line(c)}/><path d="M13 5h6 M16 5v4.5" ${line(c)}/><path d="M16 18l3.5-3.5" ${line(a)}/>`,
62  'prompt-book': (c, a) =>
63    `<path d="M9 6h13a2 2 0 0 1 2 2v18H11a2 2 0 0 1-2-2z M9 24a2 2 0 0 1 2-2h13" ${line(c)}/><path d="M15 6v8l2-1.5 2 1.5V6z" fill="${a}"/>`,
64  'rule-switch': (c, a) => `<rect x="5" y="10.5" width="22" height="11" rx="5.5" ${line(c)}/><circle cx="21.5" cy="16" r="3.2" fill="${a}"/>`,
65  'canvas-pane': (c, a) => `<rect x="5" y="7" width="22" height="18" rx="2" ${line(c)}/><path d="M8 22l5-6 4 4 3-3 4 5" ${line(a)}/><circle cx="20.5" cy="12" r="2" fill="${c}"/>`,
66  'done-chime': (c, a) => `<path d="M10 21v-6a6 6 0 0 1 12 0v6l2 2H8z" ${line(c)}/><path d="M14 26.5h4" ${line(a, 2.5)}/>`,
67  'toast-inbox': (c, a) => `<path d="M5 17l3.5-10h15L27 17v8H5z M5 17h6.5l1.5 3h6l1.5-3H27" ${line(c)}/><path d="M12.5 11.5h7" ${line(a)}/>`,
68  'mod-check': (c, a) =>
69    `<rect x="7" y="6" width="18" height="21" rx="2" ${line(c)}/><rect x="12" y="4" width="8" height="4" rx="1" fill="${c}"/><path d="M11.5 17l3.5 3.5 6-7" ${line(a, 2.5)}/>`,
70  // 遊び
71  'aqua-pet': (c, a) => `<path d="M6 16c3.5-6.5 11.5-6.5 15.5 0c-4 6.5-12 6.5-15.5 0z M21.5 16l5-4.5v9z" ${line(c)}/><circle cx="11" cy="15" r="1.5" fill="${a}"/>`,
72  'face-band': (c, a) =>
73    `<circle cx="16" cy="16" r="10" ${line(c)}/><circle cx="12.5" cy="13.5" r="1.5" fill="${c}"/><circle cx="19.5" cy="13.5" r="1.5" fill="${c}"/><path d="M11.5 19c2.5 3 6.5 3 9 0" ${line(a)}/>`,
74  'turn-haiku': (c, a) => `<rect x="11" y="6" width="10" height="21" rx="1.5" ${line(c)}/><path d="M14 10v13 M18 10v8" ${line(a)}/><path d="M16 3v3" ${line(c)}/>`,
75  'live-commentary': (c, a) => `<rect x="12" y="4.5" width="8" height="13" rx="4" ${line(c)}/><path d="M8 14.5a8 8 0 0 0 16 0 M16 22.5v4 M12 27h8" ${line(c)}/><path d="M14.5 9h3" ${line(a)}/>`,
76  'turn-gacha': (c, a) =>
77    `<circle cx="16" cy="12" r="7.5" ${line(c)}/><path d="M9 19.5h14v7H9z" ${line(c)}/><circle cx="13.5" cy="11" r="2.2" fill="${a}"/><circle cx="18.5" cy="13.5" r="2.2" fill="${c}"/>`,
78  'dev-rpg': (c, a) => `<path d="M23 5.5h3.5V9L15 20.5l-3.5-3.5z" ${line(c)}/><path d="M9.5 15l7.5 7.5 M12 20l-5 5" ${line(a)}/>`,
79  'code-omikuji': (c, a) => `<path d="M10.5 12.5l5.5-3.5 5.5 3.5V26h-11z" ${line(c)}/><path d="M18 9l3.5-5.5" ${line(a, 2.5)}/><path d="M13.5 17.5h5" ${line(c)}/>`,
80  'wait-games': (c, a) =>
81    `<path d="M9.5 10.5h13a5.5 5.5 0 0 1 5.5 5.5v2.5a4 4 0 0 1-7 2.5l-1.2-1.5h-7.6L11 21a4 4 0 0 1-7-2.5V16a5.5 5.5 0 0 1 5.5-5.5z" ${line(c)}/><path d="M10 14v5 M7.5 16.5h5" ${line(c)}/><circle cx="21" cy="15" r="1.5" fill="${a}"/><circle cx="23.5" cy="18" r="1.5" fill="${a}"/>`,
82  'daily-quest': (c, a) =>
83    `<rect x="5" y="8" width="22" height="18" rx="2" ${line(c)}/><path d="M5 13h22 M10 5v5 M22 5v5" ${line(c)}/><circle cx="20.5" cy="20" r="2.8" fill="${a}"/>`,
84  'trophy-shelf': (c, a) =>
85    `<path d="M10 6h12v6a6 6 0 0 1-12 0z" ${line(c)}/><path d="M10 8H6.5a3.5 3.5 0 0 0 4 6 M22 8h3.5a3.5 3.5 0 0 1-4 6" ${line(c)}/><path d="M16 18v4 M11 26h10 M13 22h6" ${line(a)}/>`,
86  'run-guard': (c, a) => `<rect x="4" y="6" width="19" height="15" rx="2" ${line(c)}/><path d="M4 10.5h19" ${line(c)}/><path d="M18 22h3l4-3v10l-4-3h-3z" fill="${c}"/><path d="M6 27L27 6" ${line(a, 2.5)}/>`,
87  'week-card': (c, a) => `<rect x="5" y="6" width="22" height="20" rx="3" ${line(c)}/>${[9, 7, 11, 6, 10, 8, 12].map((h, i) => `<rect x="${8 + i * 2.6}" y="${23 - h}" width="1.8" height="${h}" rx="0.9" fill="${i === 6 ? a : c}"/>`).join('')}`,
88}
89
90/** 表に無い mod: カテゴリーの色の 4 つの点 */
91const generic = (c: string) =>
92  `<circle cx="11" cy="11" r="3.2" fill="${c}"/><circle cx="21" cy="11" r="3.2" fill="${c}" opacity="0.55"/>` +
93  `<circle cx="11" cy="21" r="3.2" fill="${c}" opacity="0.55"/><circle cx="21" cy="21" r="3.2" fill="${c}"/>`
94
95export const hasIcon = (name: string) => name in ICONS
96
97/** mod のアイコン (32x32)。幅は Svg の width で決める */
98export function modIcon(name: string): string {
99  const [c, a] = tones(categoryOf(name))
100  const body = ICONS[name]?.(c, a) ?? generic(c)
101  return (
102    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">` +
103    `<rect x="1" y="1" width="30" height="30" rx="7" fill="${C.face}" stroke="${c}" stroke-opacity="0.45"/>${body}</svg>`
104  )
105}
106
107/** アイコンを 380 幅に 8 個ずつ並べた 1 枚 (README の絵用) */
108export function iconStrip(names: readonly string[]): string {
109  const size = 36
110  const gap = (380 - 16 * 2 - size * 8) / 7
111  const rows = Math.max(1, Math.ceil(names.length / 8))
112  const cells = names.map((n, i) =>
113    modIcon(n).replace('<svg ', `<svg x="${16 + (i % 8) * (size + gap)}" y="${12 + Math.floor(i / 8) * (size + 10)}" width="${size}" height="${size}" `),
114  )
115  return frame(24 + rows * size + (rows - 1) * 10, cells.join(''))
116}
117
118/** カテゴリーの見出しの帯: 色の縦線・名前・本数、下の線が伸びる */
119export function bandSvg(label: Group, count: number): string {
120  const color = categoryColor(label)
121  return frame(
122    30,
123    `<rect x="0" y="6" width="4" height="18" rx="2" fill="${color}"/>` +
124      `<text x="14" y="20" font-size="14" font-weight="bold" fill="${color}">${esc(label)}</text>` +
125      `<text x="366" y="20" font-size="12" fill="${C.dim}" text-anchor="end">${count} 本</text>` +
126      growBar(14, 26, 352, 2, color, 0, 0.35),
127  )
128}
129

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// mod-hub の $.state の契約
2
3/** plugin.register で見えた mod 1 本 */
4export type ModHubMod = {
5  name: string
6  /** plugin.json の version。書いていなければ空 */
7  version: string
8  /** ペインを開くか、何かを描く */
9  isGui: boolean
10}
11
12/** $.command.list() のうち mod が足したコマンド */
13export type ModHubCommand = {
14  name: string
15  description: string
16  plugin: string
17}
18
19/** カテゴリー別か名前順か最近開いた順か */
20export type ModHubSort = 'category' | 'name' | 'recent'
21
22/** 起動ボタンを押した記録 (新しい順、最大 20) */
23export type ModHubRecent = { name: string; at: number }
24
25declare module 'claude-code' {
26  interface PluginState {
27    'mod-hub': {
28      mods: ModHubMod[]
29      commands: ModHubCommand[]
30      /** 最後の操作の結果 (空なら出さない) */
31      notice: string
32      /** 並べ方。$.store の 'sort' にも残す */
33      sort: ModHubSort
34      /** 検索欄の文字 (セッションの間だけ) */
35      filter: string
36      /** 固定した mod の名前。$.store の 'pins' にも残す */
37      pins: string[]
38      /** 最近開いた mod。$.store の 'recent' にも残す */
39      recent: ModHubRecent[]
40    }
41  }
42}
43