focus-timer

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register, Timer } from 'claude-code'
3
4import type { FocusTimerRun } from '../types'
5import { followTheme, jstDay, mayWrite, readTheme, rememberVersion } from './style'
6import { mmss, ringSvg, todaySvg } from './svg'
7import type { Status } from './svg'
8
9const PANE = 'focus-timer'
10const TITLE = '集中'
11const STORE_KEY = 'done'
12
13const runA = atom({ plugin: 'focus-timer', key: 'run' } as const, null as FocusTimerRun | null)
14const doneA = atom({ plugin: 'focus-timer', key: 'done' } as const, {} as Record<string, number>)
15
16type $ = EngineInterface
17
18/** 日本時間の日付 YYYY-MM-DD (動いている環境のタイムゾーンに頼らない) */
19const dayKey = jstDay
20
21const minutes = (v: unknown, fallback: number) => {
22  const n = Number(v)
23  return Number.isFinite(n) && n > 0 ? n : fallback
24}
25
26/** store の日付ごとの本数を洗う。数でない値は 0。形が違えば undefined */
27const cleanDone = (v: unknown): Record<string, number> | undefined => {
28  if (v === null || typeof v !== 'object' || Array.isArray(v)) return undefined
29  const out: Record<string, number> = {}
30  for (const [k, n] of Object.entries(v)) out[k] = typeof n === 'number' && Number.isFinite(n) && n > 0 ? Math.floor(n) : 0
31  return out
32}
33
34/**
35 * store に書く形。日付でないキー (この版が知らない、新しい版が足した欄) は、cleanDone で 0 にせず読んだまま残す。
36 * 古い版のまま動いているセッションが、新しい版の記録を消さないように
37 */
38const withUnknown = (raw: unknown, done: Record<string, number>): Record<string, unknown> => ({
39  ...done,
40  ...(raw !== null && typeof raw === 'object' && !Array.isArray(raw) ? Object.fromEntries(Object.entries(raw).filter(([k]) => !/^\d{4}-\d{2}-\d{2}$/.test(k))) : {}),
41})
42
43/** 日付ごとに大きい方 */
44const maxDone = (a: Record<string, number>, b: Record<string, number>) => {
45  const out = { ...a }
46  for (const [k, n] of Object.entries(b)) out[k] = Math.max(out[k] ?? 0, n)
47  return out
48}
49
50const statusOf = (run: FocusTimerRun | null): Status =>
51  run === null ? '待機' : run.endsAt === null ? '一時停止' : run.mode === 'focus' ? '集中中' : '休憩中'
52
53const open = async ($: $) => {
54  await $.ui.open({ id: PANE, title: TITLE })
55  return { text: '集中タイマーを開きました。' }
56}
57
58// 長さ (分) は register で userConfig から入れる
59const len = { focusMs: 25 * 60_000, breakMs: 5 * 60_000 }
60
61// 終わりを知らせる after。リロードで消えるので session.start で張り直す
62let timer: Timer | undefined
63let lastDay = ''
64// /focus を自分で取れたか (取れなければ組み込みの /focus には触らない)
65let ownsFocus = false
66
67const arm = ($: $, run: FocusTimerRun | null, now: number) => {
68  timer?.cancel()
69  timer = undefined
70  const endsAt = run?.endsAt
71  if (endsAt == null) return
72  timer = $.clock.after(Math.max(1000, endsAt - now), () => void finish($, endsAt))
73}
74
75/** 状態を変えて、その結果に合わせてタイマーを張り直す */
76const change = async ($: $, fn: (run: FocusTimerRun | null, now: number) => FocusTimerRun | null) => {
77  const now = await $.clock.now()
78  const box = { run: null as FocusTimerRun | null }
79  await update($, runA, r => (box.run = fn(r, now)))
80  arm($, box.run, now)
81}
82
83const tell = async ($: $, text: string) => {
84  $.ui.toast(text, { timeoutMs: 8000 })
85  // 端末が無い (VS Code など) や通知を切っている時は送られないだけ。拒まれても落とさない
86  try {
87    await $.ui.notify(text, { title: TITLE })
88  } catch {
89    // 何もしない
90  }
91}
92
93/** endsAt に張った区切りが終わった。その間に一時停止・やめる等で差し替わっていれば何もしない */
94const finish = async ($: $, endsAt: number): Promise<void> => {
95  const now = await $.clock.now()
96  const { breakMs } = len
97  const box = { ended: null as FocusTimerRun | null, next: null as FocusTimerRun | null }
98  await update($, runA, r => {
99    box.ended = null
100    if (r === null || r.endsAt !== endsAt) return r
101    box.ended = r
102    box.next = r.mode === 'focus' ? { mode: 'break', totalMs: breakMs, endsAt: now + breakMs, leftMs: breakMs } : null
103    return box.next
104  })
105  const ended = box.ended
106  if (ended === null) return
107  arm($, box.next, now)
108  if (ended.mode === 'focus') {
109    const key = dayKey(now)
110    // 同じ store を別のセッションも書くので、書く直前に読み直してその日を +1 する (古い写しで上書きしない)
111    const raw = await $.store.get(STORE_KEY).catch(() => null)
112    const stored = raw === undefined ? {} : cleanDone(raw)
113    if (stored === undefined) {
114      await update($, doneA, d => ({ ...d, [key]: (d[key] ?? 0) + 1 }))
115      $.ui.toast('集中の本数を保存できませんでした(記録を読めませんでした)', { timeoutMs: 8000 })
116    } else if (!(await mayWrite($, now))) {
117      // 新しい版が入ったのに古い版のまま動いている時は書かない (開き直しのお願いは mayWrite がトーストで出す)
118      await update($, doneA, d => ({ ...d, [key]: (d[key] ?? 0) + 1 }))
119    } else {
120      // ponytail: 日付ごとの記録は消さずに溜める。1 日 1 キーなので年単位でも小さい
121      const all = { ...stored, [key]: (stored[key] ?? 0) + 1 }
122      await $.store.set(STORE_KEY, withUnknown(raw, all)).then(
123        () => update($, doneA, d => maxDone(d, all)),
124        () => {
125          $.ui.toast('集中の本数を保存できませんでした', { timeoutMs: 8000 })
126          return update($, doneA, d => ({ ...d, [key]: (d[key] ?? 0) + 1 }))
127        },
128      )
129    }
130    await tell($, `集中 ${Math.round(ended.totalMs / 60_000)} 分おわり。${Math.round(breakMs / 60_000)} 分休憩しましょう`)
131  } else {
132    await tell($, '休憩おわり。次の集中をどうぞ')
133  }
134}
135
136export const register: Register = (on, options) => {
137  len.focusMs = minutes(options.focusMinutes, 25) * 60_000
138  len.breakMs = minutes(options.breakMinutes, 5) * 60_000
139  const { focusMs } = len
140  followTheme(on)
141
142  on('session.start', async ($, e, next) => {
143    await readTheme($)
144    await rememberVersion($).catch(() => {})
145    // /focus は組み込みにあると拒まれる。その時は /focus-timer にし、/focus は組み込みに任せる
146    const got = await $.command.register({ name: 'focus', description: 'ポモドーロの集中タイマーをペインに表示' }).catch(() => undefined)
147    ownsFocus = got?.command === 'focus'
148    if (!ownsFocus) {
149      await $.command.register({ name: 'focus-timer', description: 'ポモドーロの集中タイマーをペインに表示' }).catch(() => {})
150    }
151
152    // 前のセッションまでの完了本数を読み戻す (リロードなら state の方が新しいのでそのまま)
153    // 前のセッションまでの完了本数を読み戻す。リロードで state にある分とは日付ごとに大きい方
154    const stored = cleanDone(await $.store.get(STORE_KEY).catch(() => undefined))
155    if (stored) await update($, doneA, d => maxDone(d, stored))
156
157    const now = await $.clock.now()
158    lastDay = dayKey(now)
159    const run = await read($, runA)
160    // リロード中に終わっていた区切りは今終える。まだなら張り直す
161    if (run?.endsAt != null && run.endsAt <= now) await finish($, run.endsAt)
162    else arm($, run, now)
163
164    // 1 分ごと: 走っている間と日付が変わった時だけ描き直す。after を取りこぼしていたらここで終える
165    $.clock.every(60_000, () => {
166      void (async () => {
167        const t = await $.clock.now()
168        const r = await read($, runA)
169        if (r?.endsAt != null && r.endsAt <= t) return finish($, r.endsAt)
170        const day = dayKey(t)
171        if (r?.endsAt != null || day !== lastDay) $.ui.invalidate('ui.render')
172        lastDay = day
173      })()
174    })
175    return next(e)
176  })
177
178  on('command.run', { command: 'focus' }, ($, e, next) => (ownsFocus ? open($) : next(e))).catch(($, e, next) => next(e))
179  // /focus を持てた時は /focus-timer を登録していないので、その名前の持ち主に回す
180  on('command.run', { command: 'focus-timer' }, ($, e, next) => (ownsFocus ? next(e) : open($))).catch(($, e, next) => next(e))
181
182  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
183    const t = $.ui.resolve(e)
184    const { Box, Text, Button } = t
185    const run = await read($, runA)
186    const done = await read($, doneA)
187    const now = await $.clock.now()
188    const today = done[dayKey(now)] ?? 0
189    const status = statusOf(run)
190    const totalMs = run?.totalMs ?? focusMs
191    const leftMs = run === null ? focusMs : run.endsAt === null ? run.leftMs : Math.max(0, run.endsAt - now)
192
193    const start = () =>
194      change($, (r, n) => r ?? { mode: 'focus', totalMs: focusMs, endsAt: n + focusMs, leftMs: focusMs })
195    const pause = () =>
196      change($, (r, n) => (r !== null && r.endsAt !== null ? { ...r, endsAt: null, leftMs: Math.max(0, r.endsAt - n) } : r))
197    const resume = () => change($, (r, n) => (r !== null && r.endsAt === null ? { ...r, endsAt: n + r.leftMs } : r))
198    const stop = () => change($, () => null)
199    const skip = () => change($, r => (r?.mode === 'break' ? null : r))
200
201    const buttons = (
202      <Box key="buttons" flexDirection="row" gap={1}>
203        {run === null && <Button key="start" label="開始" variant="primary" onPress={start} />}
204        {run !== null && run.endsAt !== null && <Button key="pause" label="一時停止" onPress={pause} />}
205        {run !== null && run.endsAt === null && <Button key="resume" label="再開" variant="primary" onPress={resume} />}
206        {run?.mode === 'break' && <Button key="skip" dimColor label="休憩をとばす" onPress={skip} />}
207        {run !== null && <Button key="stop" dimColor label="やめる" onPress={stop} />}
208      </Box>
209    )
210
211    // terminal の部品表にも Svg の名前はあるので、画面の種類でも分ける
212    if (e.surface === 'terminal' || !('Svg' in t)) {
213      return (
214        <Box flexDirection="column">
215          <Text key="status" color={run?.mode === 'break' ? 'green' : run !== null ? 'red' : undefined}>
216            {/* 描き直しは 1 分ごとなので、秒は出さない */}
217            {`${status}  残り約 ${Math.ceil(leftMs / 60_000)} 分`}
218          </Text>
219          <Text key="today" dimColor>{`今日 ${today} 本 ${'●'.repeat(Math.min(today, 20))}`}</Text>
220          {buttons}
221        </Box>
222      )
223    }
224
225    const { Svg } = t
226    return (
227      <Box flexDirection="column" gap={1}>
228        <Svg
229          key="ring"
230          source={ringSvg({ status, mode: run?.mode ?? 'focus', leftMs, totalMs, isRunning: run !== null && run.endsAt !== null })}
231          alt={`${status} 残り ${mmss(leftMs)}`}
232        />
233        {buttons}
234        <Svg key="today" source={todaySvg(today)} alt={`今日の完了 ${today} 本`} />
235      </Box>
236    )
237  })
238}
239

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 を文字列で組む関数。描画面は <img> なので動きは SMIL だけ。
2// 描き直しは状態が変わる時と 1 分ごとだけなので、その間のリングの減りと秒の表示は SMIL に任せる
3import type { FocusTimerMode } from '../types'
4import { C, HEADER_H, W, esc, fadeIn, frame, header } from './style'
5
6const text = (x: number, y: number, s: string, size: number, fill: string, extra = '') =>
7  `<text x="${x}" y="${y}" font-size="${size}" fill="${fill}" ${extra}>${esc(s)}</text>`
8
9/** 残りミリ秒 → 12:34 (秒は切り上げ) */
10export const mmss = (ms: number) => {
11  const s = Math.max(0, Math.ceil(ms / 1000))
12  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`
13}
14
15export type Status = '待機' | '集中中' | '休憩中' | '一時停止'
16
17export type RingView = {
18  status: Status
19  mode: FocusTimerMode
20  leftMs: number
21  totalMs: number
22  /** 走っていれば SMIL で減らす */
23  isRunning: boolean
24}
25
26/** 秒の表示を何秒先まで SMIL で用意するか (描き直しは 1 分ごと。遅れても止まらないよう余裕を持たせる) */
27const TICK_AHEAD = 75
28
29/** 1 分ごとに描き直すので、減っていく輪と秒のほかに動きは足さない (mod-guide 2 節) */
30export const ringSvg = (v: RingView) => {
31  const H = 330 + HEADER_H
32  const cx = W / 2
33  const cy = 178 + HEADER_H
34  const r = 112
35  const len = 2 * Math.PI * r
36  const isBreak = v.mode === 'break'
37  const stroke = isBreak ? C.green : 'url(#heat)'
38  const accent = isBreak ? C.green : v.status === '待機' ? C.dim : C.orange
39  const left = Math.max(0, Math.min(v.leftMs, v.totalMs))
40  const from = len * (1 - left / Math.max(1, v.totalMs))
41
42  const defs =
43    `<defs><linearGradient id="heat" x1="0" y1="0" x2="1" y2="1">` +
44    `<stop offset="0" stop-color="${C.red}"/><stop offset="1" stop-color="${C.orange}"/></linearGradient></defs>`
45
46  // 状態の札
47  const pillW = v.status.length * 15 + 28
48  const pill =
49    `<rect x="${cx - pillW / 2}" y="${HEADER_H + 14}" width="${pillW}" height="26" rx="13" fill="none" stroke="${accent}"/>` +
50    text(cx, HEADER_H + 32, v.status, 14, accent, 'text-anchor="middle" font-weight="bold"')
51
52  // 走っている間は外側の輪がゆっくり呼吸する
53  const halo = v.isRunning
54    ? `<circle cx="${cx}" cy="${cy}" r="${r + 16}" fill="none" stroke="${isBreak ? C.green : C.orange}" stroke-width="2" opacity="0.2">` +
55      `<animate attributeName="opacity" values="0.08;0.4;0.08" dur="${isBreak ? 6 : 4}s" repeatCount="indefinite"/></circle>`
56    : ''
57
58  // 残りのリング。上から時計回りに、残りの分だけ塗る。減りは dur = 残り時間の SMIL
59  const ring =
60    `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${C.line}" stroke-width="16"/>` +
61    `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${stroke}" stroke-width="16" ` +
62    `stroke-dasharray="${len.toFixed(2)}" stroke-dashoffset="${from.toFixed(2)}" transform="rotate(-90 ${cx} ${cy})"` +
63    `${v.isRunning ? '' : ` opacity="${v.status === '待機' ? 0.35 : 0.55}"`}>` +
64    (v.isRunning
65      ? `<animate attributeName="stroke-dashoffset" from="${from.toFixed(2)}" to="${len.toFixed(2)}" dur="${(left / 1000).toFixed(3)}s" fill="freeze"/>`
66      : '') +
67    `</circle>`
68
69  // 中央の時刻。走っている間は 1 秒ごとの <text> を <set> で順に見せる
70  const clockAttrs = `text-anchor="middle" font-weight="bold"`
71  let clock: string
72  if (v.isRunning && left > 0) {
73    const first = Math.ceil(left / 1000)
74    const frac = left - (first - 1) * 1000 // 最初の表示が切り替わるまで (1〜1000ms)
75    const parts: string[] = []
76    const steps = Math.min(first, TICK_AHEAD)
77    for (let k = 0; k <= steps; k++) {
78      const begin = k === 0 ? 0 : Math.round(frac + (k - 1) * 1000)
79      const isLast = k === steps
80      const set = isLast
81        ? `<set attributeName="visibility" to="visible" begin="${begin}ms" fill="freeze"/>`
82        : `<set attributeName="visibility" to="visible" begin="${begin}ms" dur="${Math.round(k === 0 ? frac : 1000)}ms"/>`
83      parts.push(
84        `<text x="${cx}" y="${cy + 18}" font-size="56" fill="${C.text}" ${clockAttrs} visibility="hidden">${mmss((first - k) * 1000)}${set}</text>`,
85      )
86    }
87    clock = parts.join('')
88  } else {
89    clock = text(cx, cy + 18, mmss(left), 56, v.status === '待機' ? C.dim : C.text, clockAttrs)
90  }
91
92  const sub = text(cx, cy + 50, `${isBreak ? '休憩' : '集中'} ${Math.round(v.totalMs / 60_000)} 分`, 14, C.dim, 'text-anchor="middle"')
93
94  return frame(H, defs + header('集中タイマー', '', accent) + pill + halo + ring + clock + sub)
95}
96
97/** 今日の完了本数を丸の列で。4 個ずつ枠を増やす。本数が変わる時だけ描き直すので、塗った丸は順にふわっと出す */
98export const todaySvg = (count: number) => {
99  const perRow = 10
100  const gap = 32
101  const slots = Math.max(4, Math.ceil(count / 4) * 4)
102  const rows = Math.ceil(slots / perRow)
103  const top = HEADER_H + 34
104  const H = top + (rows - 1) * 30 + 26
105  const x0 = (W - (perRow - 1) * gap) / 2
106  const dots = Array.from({ length: slots }, (_, i) => {
107    const x = x0 + (i % perRow) * gap
108    const y = top + Math.floor(i / perRow) * 30
109    return i < count
110      ? fadeIn(`<circle cx="${x}" cy="${y}" r="10" fill="url(#dot)"/>`, i * 0.06)
111      : `<circle cx="${x}" cy="${y}" r="9.5" fill="none" stroke="${C.line}" stroke-width="2"/>`
112  }).join('')
113  const defs =
114    `<defs><linearGradient id="dot" x1="0" y1="0" x2="1" y2="1">` +
115    `<stop offset="0" stop-color="${C.red}"/><stop offset="1" stop-color="${C.orange}"/></linearGradient></defs>`
116  return frame(H, defs + header('今日の集中', `${count} 本`, count > 0 ? C.orange : C.dim) + dots)
117}
118

1export type FocusTimerMode = 'focus' | 'break'
2
3/**
4 * 走っている (または一時停止中の) 1 区切り。
5 * endsAt があれば走っている、null なら一時停止中で残りは leftMs
6 */
7export type FocusTimerRun = { mode: FocusTimerMode; totalMs: number; endsAt: number | null; leftMs: number }
8
9declare module 'claude-code' {
10  interface PluginState {
11    'focus-timer': {
12      /** null は待機 */
13      run: FocusTimerRun | null
14      /** 日本時間の日付 (YYYY-MM-DD) ごとの完了本数。$.store の 'done' にも写す */
15      done: Record<string, number>
16    }
17  }
18}
19