session-timeline

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { TimelineTool, TimelineTurn } from '../types'
5import { clean, followTheme, readTheme, short } from './style'
6import { timelineLines, timelineSvg, totalsOf, totalsText } from './timeline'
7
8const PANE = 'session-timeline'
9const TITLE = 'タイムライン'
10const DESCRIPTION = 'このセッションのターンとツールを横の帯で見る'
11/** 覚えておくターンの数と、1 ターンのツールの数 */
12const KEEP_TURNS = 100
13const KEEP_TOOLS = 300
14/** 実行中のターンがある間、帯を伸ばすために描き直す間隔 */
15const TICK_MS = 5_000
16
17const TURNS = atom({ plugin: 'session-timeline', key: 'turns' } as const, [] as TimelineTurn[])
18
19type $ = EngineInterface
20
21/** 走っている (end の無い) 最後のターンに fn をかける。無ければそのまま */
22const onOpenTurn = (list: TimelineTurn[], fn: (t: TimelineTurn) => TimelineTurn) => {
23  const i = list.findLastIndex(t => t.end === undefined)
24  return i < 0 ? list : list.map((t, j) => (j === i ? fn(t) : t))
25}
26
27const setTool = (list: TimelineTurn[], id: string, fn: (x: TimelineTool) => TimelineTool) =>
28  list.map(t => (t.tools.some(x => x.id === id) ? { ...t, tools: t.tools.map(x => (x.id === id ? fn(x) : x)) } : t))
29
30// ponytail: 主の名前を持てたかはモジュール変数。リロードでも session.start が来て決め直す
31let ownsMain = false
32let seq = 0
33
34const openPane = async ($: $) => {
35  await $.ui.open({ id: PANE, title: TITLE })
36  return { text: 'タイムラインを開きました。' }
37}
38
39export const register: Register = on => {
40  followTheme(on)
41
42  on('session.start', async ($, e, next) => {
43    const started = await next(e)
44    // /timeline が拒まれたら /session-timeline にする
45    const got = await $.command.register({ name: 'timeline', description: DESCRIPTION }).catch(() => undefined)
46    ownsMain = got?.command === 'timeline'
47    if (!ownsMain) await $.command.register({ name: 'session-timeline', description: DESCRIPTION }).catch(() => {})
48    await readTheme($)
49    $.clock.every(TICK_MS, async () => {
50      if ((await read($, TURNS)).some(t => t.end === undefined)) $.ui.invalidate('ui.render')
51    })
52    return started
53  })
54
55  // /timeline を持てなかった時は、その名前の持ち主に回す
56  on('command.run', { command: 'timeline' }, ($, e, next) => (ownsMain ? openPane($) : next(e))).catch(($, e, next) => next(e))
57  // /timeline を持てた時は /session-timeline を登録していないので、その名前の持ち主に回す
58  on('command.run', { command: 'session-timeline' }, ($, e, next) => (ownsMain ? next(e) : openPane($))).catch(($, e, next) => next(e))
59
60  on('session.end', async ($, e, next) => {
61    if (e.reason === 'clear') await update($, TURNS, () => [])
62    return next(e)
63  })
64
65  // メインのターンだけ行にする。サブエージェントのターンは行にしない (そのツールは開いている行に入る)
66  on('turn.start', async ($, e, next) => {
67    if (e.agentId === undefined) {
68      const now = await $.clock.now()
69      const turn: TimelineTurn = { turnId: e.turnId, start: now, label: short(clean(e.text), 60), tools: [] }
70      // 閉じずに残っていた前のターンはここで閉じる
71      await update($, TURNS, list => [...onOpenTurn(list, t => ({ ...t, end: now })), turn].slice(-KEEP_TURNS))
72    }
73    return next(e)
74  }).catch(($, e, next) => next(e))
75
76  // 見るだけ。前後で時刻を取る。落ちても呼び出しは止めない
77  on('tool.call', async ($, e, next) => {
78    // tool_use_id が無い呼び出し (mod が自分で呼んだ物など) には手元の番号を振る
79    const id = e.tool_use_id || `local-${++seq}`
80    const start = await $.clock.now()
81    const tool: TimelineTool = { id, tool: String(e.tool), start, isError: false, isSub: e.agentId !== undefined }
82    let isOpen = false
83    await update($, TURNS, list =>
84      onOpenTurn(list, t => {
85        isOpen = true
86        return { ...t, tools: [...t.tools, tool].slice(-KEEP_TOOLS) }
87      }),
88    )
89    let isError = true
90    try {
91      const r = await next(e)
92      isError = r.deny !== undefined || r.isError === true
93      return r
94    } finally {
95      if (isOpen) {
96        const end = await $.clock.now()
97        await update($, TURNS, list => setTool(list, id, x => ({ ...x, end, isError })))
98      }
99    }
100  }).catch(($, e, next) => next(e))
101
102  on('turn.complete', async ($, e, next) => {
103    if (e.agentId === undefined) {
104      const now = await $.clock.now()
105      await update($, TURNS, list => {
106        // 終わっていないツールもここで閉じる
107        const close = (t: TimelineTurn): TimelineTurn => ({
108          ...t,
109          end: now,
110          reason: e.reason,
111          tools: t.tools.map(x => (x.end === undefined ? { ...x, end: now } : x)),
112        })
113        if (list.some(t => t.turnId === e.turnId)) return list.map(t => (t.turnId === e.turnId ? close(t) : t))
114        // 始まりを聞いていないターン (読み込み前に始まった等)
115        const t: TimelineTurn = { turnId: e.turnId, start: now - e.durationMs, end: now, label: '(始まりを見ていないターン)', tools: [], reason: e.reason }
116        return [...list, t].slice(-KEEP_TURNS)
117      })
118    }
119    return next(e)
120  }).catch(($, e, next) => next(e))
121
122  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
123    const t = $.ui.resolve(e)
124    const { Box, Text, Button } = t
125    // terminal の表にも Svg の名前があるので、画面の種類でも分ける
126    const Svg = e.surface !== 'terminal' && 'Svg' in t ? t.Svg : undefined
127    const now = await $.clock.now()
128    const turns = await read($, TURNS)
129    const lines = timelineLines(turns, now)
130
131    return (
132      <Box flexDirection="column" gap={1}>
133        {Svg ? (
134          <Svg key="timeline" source={timelineSvg(turns, now)} alt={totalsText(totalsOf(turns, now))} />
135        ) : (
136          <Box key="lines" flexDirection="column">
137            {lines.map((l, i) => (
138              <Text key={`line-${i}`} color={l.color} dimColor={l.isDim} bold={l.isBold}>
139                {l.text}
140              </Text>
141            ))}
142          </Box>
143        )}
144        {turns.length > 0 && <Button key="reset" dimColor label="記録を消す" onPress={() => void update($, TURNS, () => [])} />}
145      </Box>
146    )
147  })
148}
149

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 と terminal 用の行を組む。どれも純関数(shots.mts が node で直に読む)
2import type { TimelineTurn } from '../types'
3import { C, HEADER_H, W, clean, esc, frame, growBar, header, panel, short } from './style'
4
5/** 描く行の数。古い物は「ほか n ターン」 */
6export const SHOW = 12
7/** これより長いターンは目立たせる */
8export const LONG_MS = 60_000
9/** 1 行に描く区間の上限 (SVG の source を 131,072 字に収める) */
10const MAX_SEGS = 60
11
12export type KindId = 'run' | 'edit' | 'look' | 'agent' | 'other'
13
14/** ツールの種類。赤は失敗の印に取っておく。色は呼ぶたびに C から読む (テーマで変わる) */
15export const KINDS: { id: KindId; label: string; color: () => string; tools: string[] }[] = [
16  { id: 'run', label: '実行', color: () => C.orange, tools: ['Bash', 'PowerShell'] },
17  { id: 'edit', label: '編集', color: () => C.blue, tools: ['Edit', 'Write', 'MultiEdit', 'NotebookEdit'] },
18  { id: 'look', label: '調べ', color: () => C.purple, tools: ['Read', 'Grep', 'Glob'] },
19  { id: 'agent', label: 'エージェント', color: () => C.green, tools: ['Agent', 'Task'] },
20  { id: 'other', label: 'その他', color: () => C.dim, tools: [] },
21]
22
23export const kindOf = (tool: string): KindId => KINDS.find(k => k.tools.includes(tool))?.id ?? 'other'
24const kind = (id: KindId) => KINDS.find(k => k.id === id) ?? KINDS[KINDS.length - 1]!
25
26/** 時刻 10:42 (動いている環境のローカル時刻) */
27export const hm = (ms: number) => {
28  const d = new Date(ms)
29  return `${d.getHours()}:${String(d.getMinutes()).padStart(2, '0')}`
30}
31
32/** 所要時間 8秒 / 1分5秒 / 1時間5分 */
33export const dur = (ms: number) => {
34  const s = Math.max(0, Math.round(ms / 1000))
35  if (s < 60) return `${s}秒`
36  const m = Math.floor(s / 60)
37  if (m < 60) return s % 60 ? `${m}分${s % 60}秒` : `${m}分`
38  return `${Math.floor(m / 60)}時間${m % 60}分`
39}
40
41const endOf = (x: { end?: number }, now: number) => x.end ?? now
42export const lenOf = (t: TimelineTurn, now: number) => Math.max(0, endOf(t, now) - t.start)
43
44export type Totals = { totalMs: number; turns: number; tools: number; subs: number; errors: number; isRunning: boolean }
45
46/** ターン数は reason が 'answer' の物だけ。時間は全部の行の長さの和 */
47export const totalsOf = (turns: readonly TimelineTurn[], now: number): Totals => ({
48  totalMs: turns.reduce((n, t) => n + lenOf(t, now), 0),
49  turns: turns.filter(t => t.reason === 'answer').length,
50  tools: turns.reduce((n, t) => n + t.tools.length, 0),
51  subs: turns.reduce((n, t) => n + t.tools.filter(x => x.isSub).length, 0),
52  errors: turns.reduce((n, t) => n + t.tools.filter(x => x.isError).length, 0),
53  isRunning: turns.some(t => t.end === undefined),
54})
55
56export const totalsText = (t: Totals) =>
57  `合計 ${dur(t.totalMs)} ターン ${t.turns} ツール ${t.tools}${t.subs ? `(サブ ${t.subs})` : ''} 失敗 ${t.errors}`
58
59/** 新しい順に SHOW 行と、描かない古い行の数 */
60export const visible = (turns: readonly TimelineTurn[]) => ({
61  rows: [...turns].reverse().slice(0, SHOW),
62  hidden: Math.max(0, turns.length - SHOW),
63})
64
65/** 全幅にあたる長さ: 描く行の一番長いターン (10 秒より短くはしない) */
66export const scaleOf = (rows: readonly TimelineTurn[], now: number) => Math.max(10_000, ...rows.map(t => lenOf(t, now)))
67
68export type Seg = { x: number; w: number; kind: KindId; isSub: boolean; isError: boolean }
69
70/**
71 * 1 行の区間を x の位置にする。同じ種類で 1px 以内に続く区間は 1 つにまとめ、多ければ後ろの MAX_SEGS 個だけ
72 * (失敗の印はまとめた区間のどれかが失敗なら付く)
73 */
74export function segments(t: TimelineTurn, now: number, x0: number, pxPerMs: number): Seg[] {
75  const out: Seg[] = []
76  for (const sub of [false, true]) {
77    const tools = t.tools.filter(x => x.isSub === sub).sort((a, b) => a.start - b.start)
78    for (const x of tools) {
79      const a = x0 + Math.max(0, x.start - t.start) * pxPerMs
80      const w = Math.max(3, Math.max(0, endOf(x, now) - x.start) * pxPerMs)
81      const k = kindOf(x.tool)
82      const prev = out[out.length - 1]
83      if (prev && prev.isSub === sub && prev.kind === k && a <= prev.x + prev.w + 1) {
84        prev.w = Math.max(prev.w, a + w - prev.x)
85        prev.isError ||= x.isError
86      } else {
87        out.push({ x: a, w, kind: k, isSub: sub, isError: x.isError })
88      }
89    }
90  }
91  return out.slice(-MAX_SEGS)
92}
93
94const X0 = 16
95const X1 = W - 16
96const ROW_H = 40
97const TOP = HEADER_H + 64
98
99const txt = (x: number, y: number, s: string, size: number, fill: string, extra = '') =>
100  `<text x="${x}" y="${y}" font-size="${size}" fill="${fill}"${extra ? ` ${extra}` : ''}>${esc(s)}</text>`
101
102const tile = (x: number, label: string, value: string, sub: string, color: string) =>
103  panel(x, HEADER_H + 10, 112, 46) +
104  txt(x + 10, HEADER_H + 27, label, 12, C.dim) +
105  txt(x + 10, HEADER_H + 47, value, 16, color, 'font-weight="bold"') +
106  (sub ? txt(x + 102, HEADER_H + 47, sub, 12, C.red, 'text-anchor="end"') : '')
107
108/** 1 行: 上に「時刻 長さ 依頼」、下に帯。帯の中にツールの区間 */
109function row(t: TimelineTurn, i: number, now: number, scale: number) {
110  const y = TOP + i * ROW_H
111  const len = lenOf(t, now)
112  const isLong = len >= LONG_MS
113  const isRunning = t.end === undefined
114  const px = (X1 - X0) / scale
115  const barW = Math.max(3, len * px)
116  const delay = (i * 0.05).toFixed(2)
117  const tag = isRunning ? '実行中' : t.reason === 'aborted' ? '中断' : t.reason === 'error' ? 'エラー' : t.reason === 'refusal' ? '断り' : ''
118
119  let s =
120    txt(X0, y + 13, hm(t.start), 12, C.dim) +
121    txt(X0 + 40, y + 13, dur(len), 12, isLong ? C.yellow : C.text, isLong ? 'font-weight="bold"' : '') +
122    (tag ? txt(X0 + 104, y + 13, tag, 12, isRunning ? C.green : C.red) : '') +
123    txt(X0 + (tag ? 150 : 104), y + 13, short(t.label || '(依頼の文なし)', tag ? 13 : 17), 12, C.text)
124  // 帯の地。長いターンは黄の縁
125  s += `<rect x="${X0}" y="${y + 18}" width="${X1 - X0}" height="16" rx="3" fill="${C.face}"/>`
126  s += growBar(X0, y + 18, barW, 16, C.line, Number(delay))
127  if (isLong) s += `<rect x="${X0}" y="${y + 18}" width="${barW.toFixed(1)}" height="16" rx="3" fill="none" stroke="${C.yellow}" stroke-width="1.5"/>`
128
129  // 区間は帯と一緒に左から見せる (切り抜きの幅を伸ばす)
130  const segs = segments(t, now, X0, px)
131  const clip = `tl-row-${i}`
132  s +=
133    `<clipPath id="${clip}"><rect x="${X0}" y="${y + 16}" width="${X1 - X0 + 8}" height="22">` +
134    `<animate attributeName="width" from="0" to="${X1 - X0 + 8}" begin="${delay}s" dur="0.6s" fill="freeze"/></rect></clipPath>` +
135    `<g clip-path="url(#${clip})">`
136  for (const g of segs) {
137    const color = kind(g.kind).color()
138    s += g.isSub
139      ? `<rect x="${g.x.toFixed(1)}" y="${y + 29}" width="${g.w.toFixed(1)}" height="4" rx="1" fill="${color}" stroke="${C.bg}" stroke-width="0.5"/>`
140      : `<rect x="${g.x.toFixed(1)}" y="${y + 20}" width="${g.w.toFixed(1)}" height="12" rx="2" fill="${color}"/>`
141  }
142  for (const g of segs.filter(g => g.isError)) {
143    s += `<circle cx="${(g.x + g.w).toFixed(1)}" cy="${y + 19}" r="3.5" fill="${C.red}" stroke="${C.bg}" stroke-width="1"/>`
144  }
145  s += '</g>'
146  if (isRunning) {
147    s += `<circle cx="${(X0 + barW).toFixed(1)}" cy="${y + 26}" r="3" fill="${C.green}"><animate attributeName="opacity" values="1;0.2;1" dur="1.2s" repeatCount="indefinite"/></circle>`
148  }
149  return s
150}
151
152function legend(y: number) {
153  let s = ''
154  let x = X0
155  let line = 0
156  const item = (swatch: string, label: string) => {
157    const w = 18 + Array.from(label).length * 12 + 10
158    if (x + w > X1) {
159      x = X0
160      line++
161    }
162    s += `<g transform="translate(${x} ${y + line * 20})">${swatch}${txt(16, 11, label, 12, C.dim)}</g>`
163    x += w
164  }
165  for (const k of KINDS) item(`<rect x="0" y="1" width="11" height="11" rx="2" fill="${k.color()}"/>`, k.label)
166  item(`<rect x="0" y="8" width="11" height="4" rx="1" fill="${C.green}"/>`, 'サブ')
167  item(`<circle cx="5.5" cy="6.5" r="4" fill="${C.red}"/>`, '失敗')
168  item(`<rect x="0.5" y="1.5" width="10" height="10" rx="2" fill="none" stroke="${C.yellow}" stroke-width="1.5"/>`, '1分以上')
169  return { svg: s, h: (line + 1) * 20 }
170}
171
172/** タイムライン全体。turns は古い順 (state のまま) */
173export function timelineSvg(turns: readonly TimelineTurn[], now: number): string {
174  const totals = totalsOf(turns, now)
175  const { rows, hidden } = visible(turns)
176  const scale = scaleOf(rows, now)
177  let body =
178    header('タイムライン', rows.length ? `全幅 ${dur(scale)}` : '', C.blue) +
179    tile(X0, '合計', dur(totals.totalMs), '', C.text) +
180    tile(X0 + 118, 'ターン', String(totals.turns), '', C.text) +
181    tile(X0 + 236, 'ツール', String(totals.tools), totals.errors ? `失敗${totals.errors}` : '', C.text)
182  let y = TOP
183  if (rows.length === 0) {
184    body += txt(X0, y + 16, 'まだターンがありません', 12, C.dim)
185    y += 28
186  } else {
187    rows.forEach((t, i) => (body += row(t, i, now, scale)))
188    y += rows.length * ROW_H
189    if (hidden) {
190      body += txt(X0, y + 10, `ほか ${hidden} ターン`, 12, C.dim)
191      y += 22
192    }
193  }
194  const lg = legend(y + 6)
195  return frame(y + 6 + lg.h + 8, body + lg.svg)
196}
197
198export type Line = { text: string; color?: string; isDim?: boolean; isBold?: boolean }
199
200/** terminal 用の要約。新しい順 */
201export function timelineLines(turns: readonly TimelineTurn[], now: number): Line[] {
202  const totals = totalsOf(turns, now)
203  const { rows, hidden } = visible(turns)
204  const out: Line[] = [{ text: totalsText(totals), isBold: true, color: totals.isRunning ? 'green' : undefined }]
205  if (rows.length === 0) return [...out, { text: 'まだターンがありません', isDim: true }]
206  for (const t of rows) {
207    const len = lenOf(t, now)
208    const counts = new Map<KindId, number>()
209    for (const x of t.tools) counts.set(kindOf(x.tool), (counts.get(kindOf(x.tool)) ?? 0) + 1)
210    const tools = KINDS.filter(k => counts.has(k.id))
211      .map(k => `${k.label}${counts.get(k.id)}`)
212      .join(' ')
213    const fails = t.tools.filter(x => x.isError).length
214    const flags = [
215      t.end === undefined ? '実行中' : '',
216      len >= LONG_MS ? '長い' : '',
217      t.reason === 'aborted' ? '中断' : t.reason === 'error' ? 'エラー' : '',
218      fails ? `失敗${fails}` : '',
219    ].filter(Boolean)
220    out.push({
221      text: clean(`${hm(t.start)} ${dur(len)} ${[...flags, tools || 'ツールなし'].join(' ')} ${short(t.label, 16)}`),
222      color: fails || t.reason === 'error' ? 'red' : t.end === undefined ? 'green' : len >= LONG_MS ? 'yellow' : undefined,
223    })
224  }
225  if (hidden) out.push({ text: `ほか ${hidden} ターン`, isDim: true })
226  return out
227}
228

1/** ツール呼び出し 1 回の区間 */
2export type TimelineTool = {
3  /** tool_use_id。終わりを書き込む時に引く */
4  id: string
5  tool: string
6  /** 始まった時刻 (ms) */
7  start: number
8  /** 終わった時刻 (ms)。無ければ実行中 */
9  end?: number
10  isError: boolean
11  /** サブエージェントの呼び出し */
12  isSub: boolean
13}
14
15/** メインループのターン 1 回 = 1 行 */
16export type TimelineTurn = {
17  turnId: string
18  /** 始まった時刻 (ms) */
19  start: number
20  /** 終わった時刻 (ms)。無ければ実行中 */
21  end?: number
22  /** 依頼の先頭 (制御文字は落としてある) */
23  label: string
24  /** 古い順。上限を超えた分は捨てる */
25  tools: TimelineTool[]
26  /** turn.complete の reason。'answer' の物だけターン数に数える */
27  reason?: 'answer' | 'aborted' | 'refusal' | 'error'
28}
29
30declare module 'claude-code' {
31  interface PluginState {
32    'session-timeline': {
33      /** 古い順。直近 100 ターン */
34      turns: TimelineTurn[]
35    }
36  }
37}
38