compact-cue

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register, RenderElement } from 'claude-code'
3
4import type { CueBreak } from '../types'
5import { DEFAULT_NOTIFY, DEFAULT_URGENT, advise, bandColor, contextOf, bandText, isAbsolute, isCommit, isTest, isToastLevel, isUnder, paneLines, paneSvg, toastText } from './cue'
6import { followTheme, readTheme } from './style'
7
8const PANE = 'compact-cue'
9const TITLE = 'compact の合図'
10const DESCRIPTION = 'コンテキストの使用量と、今 /compact してよいかをペインで見る'
11
12const CONTEXT = atom({ plugin: 'compact-cue', key: 'context' } as const, null)
13const PHASE = atom({ plugin: 'compact-cue', key: 'phase' } as const, 'clean')
14const LAST_BREAK = atom({ plugin: 'compact-cue', key: 'lastBreak' } as const, null)
15const TOLD = atom({ plugin: 'compact-cue', key: 'told' } as const, '')
16
17type $ = EngineInterface
18
19// 設定は register で userConfig から入れる
20const cfg = { notifyAt: DEFAULT_NOTIFY, urgentAt: DEFAULT_URGENT, memoDir: '' }
21let ownsMain = false
22
23const EDIT_TOOLS = ['Write', 'Edit', 'MultiEdit', 'NotebookEdit']
24const SHELL_TOOLS = ['Bash', 'PowerShell']
25
26/** シェルのコマンドがメモのフォルダを指しているか (D:\x と /d/x の両方の書き方を見る) */
27function mentionsMemo(command: string) {
28  if (cfg.memoDir === '') return false
29  const dir = cfg.memoDir.replace(/\\/g, '/').replace(/\/+$/, '').toLowerCase()
30  const msys = dir.replace(/^([a-z]):/, (_, d: string) => `/${d}`)
31  const c = command.replace(/\\/g, '/').toLowerCase()
32  return c.includes(`${dir}/`) || c.includes(`${msys}/`)
33}
34
35const drawsSomething = (tree: RenderElement) => tree.type !== 'engine'
36
37async function markBreak($: $, kind: CueBreak['kind']) {
38  const at = await $.clock.now()
39  await update($, LAST_BREAK, () => ({ kind, at }))
40  await update($, PHASE, () => 'clean' as const)
41}
42
43const markMid = ($: $) => update($, PHASE, () => 'mid' as const)
44
45/** 今の様子を一度に読む */
46async function snapshot($: $) {
47  return {
48    ctx: await read($, CONTEXT),
49    phase: await read($, PHASE),
50    lastBreak: await read($, LAST_BREAK),
51    notifyAt: cfg.notifyAt,
52    urgentAt: cfg.urgentAt,
53    memoDir: cfg.memoDir,
54  }
55}
56
57const openPane = async ($: $) => {
58  await $.ui.open({ id: PANE, title: TITLE })
59  return { text: 'compact の合図のペインを開きました。' }
60}
61
62export const register: Register = (on, options) => {
63  const notify = Number(options.notifyPercent)
64  const urgent = Number(options.urgentPercent)
65  cfg.notifyAt = Number.isFinite(notify) && notify > 0 ? Math.min(100, notify) : DEFAULT_NOTIFY
66  cfg.urgentAt = Math.max(cfg.notifyAt, Number.isFinite(urgent) && urgent > 0 ? Math.min(100, urgent) : DEFAULT_URGENT)
67  const memo = String(options.memoDir ?? '').trim()
68  cfg.memoDir = isAbsolute(memo) ? memo : ''
69
70  followTheme(on)
71  on('session.start', async ($, e, next) => {
72    const started = await next(e)
73    await readTheme($)
74    // 途中で読み込まれた時も帯を聞きに来るように (docs/mod-guide.md の 3 節)
75    $.ui.invalidate('ui.render')
76    const got = await $.command.register({ name: 'cue', description: DESCRIPTION }).catch(() => undefined)
77    ownsMain = got?.command === 'cue'
78    if (!ownsMain) await $.command.register({ name: 'compact-cue', description: DESCRIPTION }).catch(() => {})
79    return started
80  })
81
82  on('command.run', { command: 'cue' }, ($, e, next) => (ownsMain ? openPane($) : next(e))).catch(($, e, next) => next(e))
83  on('command.run', { command: 'compact-cue' }, openPane)
84
85  // 編集すると途中、コミット・テスト通過・メモを書くと区切り (サブエージェントの分も数える)
86  on('tool.call', async ($, e, next) => {
87    const r = await next(e)
88    if (r.deny !== undefined) return r
89    const tool = String(e.tool)
90    const isOk = r.isError !== true
91    const args = e as unknown as Record<string, unknown>
92    if (EDIT_TOOLS.includes(tool) && isOk) {
93      const path = String(args.file_path ?? args.notebook_path ?? '')
94      if (isUnder(path, cfg.memoDir)) await markBreak($, 'memo')
95      else await markMid($)
96    } else if (SHELL_TOOLS.includes(tool) && typeof args.command === 'string' && args.run_in_background !== true) {
97      const command = args.command
98      if (isCommit(command) && isOk) await markBreak($, 'commit')
99      else if (isTest(command)) await (isOk ? markBreak($, 'test') : markMid($))
100      else if (isOk && mentionsMemo(command)) await markBreak($, 'memo')
101    }
102    return r
103  }).catch(($, e, next) => next(e))
104
105  // メインのターンが終わったら使用量を読み (この呼び出しはただ)、区切りに入った時だけトーストを出す
106  on('turn.complete', async ($, e, next) => {
107    const done = await next(e)
108    if (e.agentId !== undefined) return done
109    // 内訳は summary (手元の見積もりだけで API は呼ばない)。自動 compact の位置を 100% にするために読む
110    const usage = await $.session.usage({ breakdown: 'summary' }).catch(() => $.session.usage().catch(() => undefined))
111    if (usage) await update($, CONTEXT, () => contextOf(usage.context))
112    const s = await snapshot($)
113    const a = advise(s.ctx, s.phase, s.lastBreak, s.notifyAt, s.urgentAt)
114    const told = await read($, TOLD)
115    if (isToastLevel(a.level) && told !== a.level) {
116      $.ui.toast(toastText(s.ctx, a), { timeoutMs: 8000 })
117      await update($, TOLD, () => a.level)
118    } else if (!isToastLevel(a.level) && told !== '') {
119      await update($, TOLD, () => '')
120    }
121    return done
122  }).catch(($, e, next) => next(e))
123
124  // compact が済んだら合図を下ろす。使用量は compact 後の数があればそれ、無ければ次の返事で読む
125  on('session.compact', async ($, e, next) => {
126    const r = await next(e)
127    if (e.agentId !== undefined || e.trigger === 'precompute' || r.skip !== undefined) return r
128    const before = await read($, CONTEXT)
129    const after = 'tokensAfter' in r ? r.tokensAfter : undefined
130    const window = before?.window ?? 0
131    const base = { window, ...(before?.isAutoLimit ? { isAutoLimit: true } : {}) }
132    await update($, CONTEXT, () =>
133      after !== undefined && window > 0 ? { ...base, percent: Math.round((after / window) * 100), tokens: after } : window > 0 ? base : null,
134    )
135    await update($, PHASE, () => 'clean' as const)
136    await update($, TOLD, () => '')
137    return r
138  }).catch(($, e, next) => next(e))
139
140  // 入力欄の上の帯。合図が無い時は下の mod に任せる
141  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
142    if (e.props.hasSurvey) return next(e)
143    const s = await snapshot($)
144    const a = advise(s.ctx, s.phase, s.lastBreak, s.notifyAt, s.urgentAt)
145    if (a.level === 'ok') return next(e)
146    const below = await next(e)
147    const { Box, Text } = $.ui.resolve(e)
148    const cue = (
149      <Box key="cue" flexShrink={0}>
150        <Text color={bandColor(a.level)} dimColor={a.level === 'wait'} bold={a.level !== 'wait'}>
151          {bandText(s.ctx, a)}
152        </Text>
153      </Box>
154    )
155    if (!drawsSomething(below)) return cue
156    return (
157      <Box flexDirection="column">
158        {cue}
159        <Box key="below">{below}</Box>
160      </Box>
161    )
162  }).catch(($, e, next) => next(e))
163
164  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
165    const t = $.ui.resolve(e)
166    const { Box, Text } = t
167    // terminal の表にも Svg の名前があるので、画面の種類でも分ける
168    const Svg = e.surface !== 'terminal' && 'Svg' in t ? t.Svg : undefined
169    const s = await snapshot($)
170    const lines = paneLines(s)
171    return (
172      <Box flexDirection="column" gap={1}>
173        {Svg ? (
174          <Svg source={paneSvg(s)} alt={lines.map(l => l.text).join('\n')} />
175        ) : (
176          <Box key="lines" flexDirection="column">
177            {lines.map(l => (
178              <Text color={l.color} dimColor={l.isDim} bold={l.isBold}>
179                {l.text}
180              </Text>
181            ))}
182          </Box>
183        )}
184        <Text dimColor>知らせるだけです。compact は /compact で行ってください。</Text>
185      </Box>
186    )
187  })
188}
189

1// compact の合図を決めて、帯・ペインの文と SVG を組む。どれも純関数
2import type { CueBreak, CueContext, CuePhase } from '../types'
3import { C, HEADER_H, esc, frame, header, panel } from './style'
4
5/** 合図の段階。ok は何も出さない */
6export type Level = 'ok' | 'wait' | 'good' | 'soon' | 'now'
7
8export type Advice = { level: Level; word: string; reason: string }
9
10export const DEFAULT_NOTIFY = 50
11export const DEFAULT_URGENT = 75
12
13/** 区切りの印の名前 */
14const BREAK_LABEL: Record<CueBreak['kind'], string> = { commit: 'コミットの後', test: 'テストが通った後', memo: '引き継ぎメモを書いた後' }
15
16/** $.session.usage() の context の形 (内訳は使う所だけ) */
17export type UsageContext = {
18  tokens?: number
19  window: number
20  percent?: number
21  breakdown?: { rawMaxTokens: number; autoCompactThreshold?: number }
22}
23
24/**
25 * 使用量を、自動 compact が走る位置を 100% として数え直す。モデルの窓 (window) より手前で
26 * 自動 compact が走る時に、合図が間に合わなくならないように。内訳が無ければ window に対する割合のまま
27 */
28export function contextOf(c: UsageContext): CueContext {
29  const b = c.breakdown
30  const limit = b ? (b.autoCompactThreshold ?? b.rawMaxTokens) : 0
31  if (!b || !(limit > 0)) return { percent: c.percent, tokens: c.tokens, window: c.window }
32  const percent = c.tokens === undefined ? undefined : Math.round((c.tokens / limit) * 100)
33  return { percent, tokens: c.tokens, window: limit, ...(b.autoCompactThreshold !== undefined ? { isAutoLimit: true } : {}) }
34}
35
36/** 今の使用量と作業の様子から合図を決める */
37export function advise(ctx: CueContext | null, phase: CuePhase, lastBreak: CueBreak | null, notifyAt: number, urgentAt: number): Advice {
38  const p = ctx?.percent
39  if (p === undefined || p < notifyAt) return { level: 'ok', word: '', reason: '' }
40  const isUrgent = p >= urgentAt
41  if (phase === 'clean') {
42    const reason = lastBreak ? BREAK_LABEL[lastBreak.kind] : 'まだ編集していません'
43    return isUrgent
44      ? { level: 'now', word: '今 /compact してください', reason }
45      : { level: 'good', word: '区切りです。今が /compact のよい時です', reason }
46  }
47  return isUrgent
48    ? { level: 'soon', word: '残りが少ないです。次の区切りで必ず /compact', reason: '編集の途中です' }
49    : { level: 'wait', word: '区切り(テスト・コミット)まで進めてから /compact', reason: '編集の途中です' }
50}
51
52/** トーストを出す段階 (同じ段階では 1 回だけ) */
53export const isToastLevel = (level: Level) => level === 'good' || level === 'now'
54
55/** 帯の文字の色 (Text の color はテーマの名前で書く) */
56export const bandColor = (level: Level) => ({ ok: undefined, wait: undefined, good: 'success', soon: 'error', now: 'warning' })[level]
57
58/** 帯の 1 行 */
59export const bandText = (ctx: CueContext | null, a: Advice) => `コンテキスト ${ctx?.percent ?? '─'}% ─ ${a.word}`
60
61/** トーストの文 */
62export const toastText = (ctx: CueContext | null, a: Advice) => `${a.word}(コンテキスト ${ctx?.percent ?? '─'}%、${a.reason})`
63
64// ── 区切りの見分け方
65
66/** 引用符の中身とヒアドキュメントの本文を Q に置き換える (コミットの文の中の言葉を拾わない) */
67export function unquote(command: string) {
68  return command
69    .replace(/<<-?\s*(['"]?)(\w+)\1[^\n]*\n[\s\S]*?\n\s*\2\s*(?=\n|$)/g, ' Q')
70    .replace(/'[^']*'|"(?:[^"\\]|\\.)*"/g, 'Q')
71}
72
73/** コマンドの区切り (&& ; | など) で分けた 1 つずつ。頭の VAR=値 と & は落とす */
74export function segments(command: string) {
75  return unquote(command)
76    .split(/&&|\|\||[;|\n`{}]|\$\(|\(/)
77    .map(s => s.trim().replace(/^(?:[\w.]+=\S*\s+)*(?:&\s*)?/, ''))
78    .filter(s => s !== '')
79}
80
81const GIT_OPTS = String.raw`(?:\s+(?:-[cC]\s+\S+|--?[\w-]+(?:=\S+)?))*`
82const GIT = String.raw`^(?:\S*[\\/])?git(?:\.exe)?\b`
83
84/** git commit か */
85export const isCommit = (command: string) => segments(command).some(s => new RegExp(`${GIT}${GIT_OPTS}\\s+commit\\b`, 'i').test(s))
86
87/** テストを走らせるコマンドか */
88export const TEST_COMMAND =
89  /^(?:\S*[\\/])?(?:(?:npm|pnpm|yarn|bun)(?:\.cmd)?\s+(?:run\s+)?test\b|npx\s+(?:vitest|jest)\b|vitest\b|jest\b|pytest\b|python\d*(?:\.exe)?\s+-m\s+pytest\b|cargo\s+test\b|go\s+test\b|node(?:\.exe)?\s+--test\b|dotnet\s+test\b|(?:\.[\\/])?gradlew?(?:\.bat)?\s+test\b|mvn\s+test\b|ctest\b|claude(?:\.exe)?\s+plugin\s+test\b)/i
90export const isTest = (command: string) => segments(command).some(s => TEST_COMMAND.test(s))
91
92/** パスを比べる形にする (区切りを / に、大文字小文字を無視、末尾の / を落とす) */
93const norm = (p: string) => p.replace(/\\/g, '/').replace(/\/+$/, '').toLowerCase()
94
95/** 絶対パスか (C:\ や / で始まる)。C: だけや相対パスは未設定と同じに扱う */
96export const isAbsolute = (p: string) => /^[a-zA-Z]:[\\/]/.test(p) || p.startsWith('/') || p.startsWith('\\\\')
97
98/** path が dir の下か */
99export const isUnder = (path: string, dir: string) => dir !== '' && norm(path).startsWith(`${norm(dir)}/`)
100
101// ── ペイン
102
103const LEVEL_COLOR = (level: Level) => ({ ok: C.green, wait: C.dim, good: C.green, soon: C.red, now: C.yellow })[level]
104
105const clock = (ms: number) => {
106  const d = new Date(ms)
107  return [d.getHours(), d.getMinutes()].map(n => String(n).padStart(2, '0')).join(':')
108}
109
110/** 使用量のリング。0 から伸びて止まる */
111function ring(cx: number, cy: number, r: number, percent: number | undefined, notifyAt: number, urgentAt: number, color: string) {
112  const len = 2 * Math.PI * r
113  const p = Math.max(0, Math.min(100, percent ?? 0))
114  const on = (len * p) / 100
115  const tick = (at: number, c: string) => {
116    const a = (at / 100) * 2 * Math.PI - Math.PI / 2
117    const x1 = cx + Math.cos(a) * (r - 9)
118    const y1 = cy + Math.sin(a) * (r - 9)
119    const x2 = cx + Math.cos(a) * (r + 9)
120    const y2 = cy + Math.sin(a) * (r + 9)
121    return `<line x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}" stroke="${c}" stroke-width="2"/>`
122  }
123  return (
124    `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${C.line}" stroke-width="12"/>` +
125    `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${color}" stroke-width="12" stroke-linecap="round" ` +
126    `stroke-dasharray="${on.toFixed(1)} ${len.toFixed(1)}" transform="rotate(-90 ${cx} ${cy})">` +
127    `<animate attributeName="stroke-dasharray" from="0 ${len.toFixed(1)}" to="${on.toFixed(1)} ${len.toFixed(1)}" dur="0.8s" fill="freeze"/></circle>` +
128    tick(notifyAt, C.dim) +
129    tick(urgentAt, C.red) +
130    `<text x="${cx}" y="${cy + 8}" font-size="26" font-weight="bold" fill="${C.text}" text-anchor="middle">${percent === undefined ? '─' : `${percent}%`}</text>`
131  )
132}
133
134export type PaneInput = {
135  ctx: CueContext | null
136  phase: CuePhase
137  lastBreak: CueBreak | null
138  notifyAt: number
139  urgentAt: number
140  memoDir: string
141}
142
143/** 全角を 2、半角を 1 と数えて max までの行に分ける。半角の続き (/compact など) と句読点の前では切らない */
144export function wrap(text: string, max: number) {
145  const lines: string[] = []
146  let line = ''
147  let n = 0
148  for (const tok of text.match(/[\x21-\x7e]+|[^\x21-\x7e]/g) ?? []) {
149    const w = [...tok].reduce((k, ch) => k + (/[\x20-\x7e]/.test(ch) ? 1 : 2), 0)
150    if (n + w > max && line.trim() !== '' && !/^[。、)]$/.test(tok)) {
151      lines.push(line.trim())
152      line = ''
153      n = 0
154    }
155    line += tok
156    n += w
157  }
158  if (line.trim() !== '') lines.push(line.trim())
159  return lines
160}
161
162/** 合図が出ていない時の一言 */
163const calmWord = (ctx: CueContext | null) => (ctx?.percent === undefined ? '次の返事で使用量を読みます' : 'まだ余裕があります')
164
165/** ペインの SVG 1 枚 */
166export function paneSvg(i: PaneInput) {
167  const a = advise(i.ctx, i.phase, i.lastBreak, i.notifyAt, i.urgentAt)
168  const color = LEVEL_COLOR(a.level)
169  const word = a.level === 'ok' ? calmWord(i.ctx) : a.word
170  const tokens = i.ctx?.tokens === undefined ? '' : `${Math.round(i.ctx.tokens / 1000)}k / ${Math.round(i.ctx.window / 1000)}k`
171  let s = panel(8, 8, 364, 150)
172  s += ring(82, 83, 52, i.ctx?.percent, i.notifyAt, i.urgentAt, color)
173  // 言葉は 3 行まで (全角 13 字ほど。/compact の途中では切らない)
174  const lines = wrap(word, 26).slice(0, 3)
175  lines.forEach((l, k) => (s += `<text x="152" y="${46 + k * 22}" font-size="15" font-weight="bold" fill="${color}">${esc(l)}</text>`))
176  if (a.reason !== '') s += `<text x="152" y="${46 + lines.length * 22 + 2}" font-size="12" fill="${C.dim}">${esc(a.reason)}</text>`
177  if (i.ctx?.isAutoLimit) s += `<text x="152" y="146" font-size="12" fill="${C.dim}">100% は自動 compact の位置</text>`
178
179  const y = 168
180  s += panel(8, y, 364, 132)
181  s += `<text x="20" y="${y + 24}" font-size="13" font-weight="bold" fill="${C.text}">作業の様子</text>`
182  const phaseWord = i.phase === 'clean' ? '区切り' : '編集の途中'
183  s += `<text x="360" y="${y + 24}" font-size="13" text-anchor="end" fill="${i.phase === 'clean' ? C.green : C.yellow}">${phaseWord}</text>`
184  const last = i.lastBreak ? `${clock(i.lastBreak.at)} ${BREAK_LABEL[i.lastBreak.kind]}` : 'まだありません'
185  s += `<text x="20" y="${y + 50}" font-size="12" fill="${C.dim}">最後の区切り</text><text x="360" y="${y + 50}" font-size="12" text-anchor="end" fill="${C.text}">${esc(last)}</text>`
186  s += `<text x="20" y="${y + 74}" font-size="12" fill="${C.dim}">合図</text><text x="360" y="${y + 74}" font-size="12" text-anchor="end" fill="${C.text}">${i.notifyAt}% から / ${i.urgentAt}% で急ぎ</text>`
187  s += `<text x="20" y="${y + 98}" font-size="12" fill="${C.dim}">区切りの印</text><text x="360" y="${y + 98}" font-size="12" text-anchor="end" fill="${C.text}">コミット・テスト通過${i.memoDir === '' ? '' : '・メモ'}</text>`
188  s += `<text x="20" y="${y + 120}" font-size="12" fill="${C.dim}">compact の前に引き継ぎメモを更新しておくと安心です</text>`
189  return frame(HEADER_H + y + 140, header('compact の合図', tokens, color) + `<g transform="translate(0 ${HEADER_H})">${s}</g>`)
190}
191
192export type Line = { text: string; color?: string; isDim?: boolean; isBold?: boolean }
193
194/** Svg の alt と terminal で使う文の行 */
195export function paneLines(i: PaneInput): Line[] {
196  const a = advise(i.ctx, i.phase, i.lastBreak, i.notifyAt, i.urgentAt)
197  const lines: Line[] = [
198    { text: `コンテキスト ${i.ctx?.percent ?? '─'}%`, isBold: true },
199    a.level === 'ok' ? { text: calmWord(i.ctx), isDim: true } : { text: `${a.word}(${a.reason})`, color: bandColor(a.level) },
200    { text: `作業の様子: ${i.phase === 'clean' ? '区切り' : '編集の途中'}` },
201    { text: `最後の区切り: ${i.lastBreak ? `${clock(i.lastBreak.at)} ${BREAK_LABEL[i.lastBreak.kind]}` : 'まだありません'}`, isDim: true },
202    { text: `合図は ${i.notifyAt}% から、${i.urgentAt}% で急ぎ`, isDim: true },
203  ]
204  if (i.ctx?.isAutoLimit) lines.push({ text: '100% は自動 compact が走る位置です', isDim: true })
205  return lines
206}
207

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/** コンテキストの使用量 ($.session.usage() の context から) */
2export type CueContext = {
3  /** 使っている割合 (0 から 100)。返事がまだ無ければ無し */
4  percent?: number
5  tokens?: number
6  /** 100% にする所 (自動 compact の位置か、モデルの窓) */
7  window: number
8  /** window が自動 compact の位置なら true */
9  isAutoLimit?: boolean
10}
11
12/** 作業の様子。clean は区切り (最後の編集の後に区切りの印があった、または編集していない) */
13export type CuePhase = 'clean' | 'mid'
14
15/** 区切りの印 */
16export type CueBreak = { kind: 'commit' | 'test' | 'memo'; at: number }
17
18declare module 'claude-code' {
19  interface PluginState {
20    'compact-cue': {
21      context: CueContext | null
22      phase: CuePhase
23      lastBreak: CueBreak | null
24      /** もうトーストを出した段階 (同じ段階では 2 回出さない)。空なら出していない */
25      told: string
26    }
27  }
28}
29