ai-usage-hub

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3import type { HubState } from '../types'
4import { barColor, buildCards, parseUsage, recommend, resetLabel, retainCard, svgBar, textBar, timeLabel } from './usage'
5
6const PANE = 'ai-usage-hub'
7const hub = atom({ plugin: 'ai-usage-hub', key: 'hub' } as const, {
8  cards: buildCards(null, null), updatedAt: null, lastAttempt: null, collecting: false, now: 0,
9} as HubState)
10
11async function collect($: EngineInterface): Promise<void> {
12  const started = await $.clock.now()
13  let claimed = false
14  await update($, hub, state => {
15    claimed = !state.collecting && (state.lastAttempt === null || started - state.lastAttempt >= 60_000)
16    return claimed ? { ...state, collecting: true, lastAttempt: started } : state
17  })
18  if (!claimed) return
19  try {
20    const [external, claude] = await Promise.allSettled([
21      (async () => {
22        const node = (await $.env.get('AI_USAGE_NODE')) || 'node'
23        const dir = (await $.env.get('AI_USAGE_DASH_DIR')) ||
24          `${(await $.env.get('USERPROFILE')) || (await $.env.get('HOME')) || ''}/ai-usage-dashboard`
25        const result = await $.process.run([node, `${dir.replace(/[\\/]$/, '')}/server.mjs`, '--json', 'codex,grok,gemini,devin,claude'], {
26          cwd: dir, timeoutMs: 180_000,
27        })
28        if (result.exitCode !== 0 || result.isStdoutTruncated) throw new Error('Usage process failed')
29        return parseUsage(result.stdout)
30      })(),
31      $.session.usage(),
32    ])
33    const now = await $.clock.now()
34    const cards = buildCards(external.status === 'fulfilled' ? external.value : null,
35      claude.status === 'fulfilled' ? claude.value : null)
36    await update($, hub, state => ({
37      ...state, now, updatedAt: now,
38      cards: cards.map((card, index) => {
39        const failed = index === 0 ? card.rows.some(row => row.used === null) ||
40          (external.status === 'rejected' && state.cards[0]?.rows.some(row => row.star || row.label.includes('Fable')) === true) ||
41          (external.status === 'fulfilled' && external.value.groups.find(group => group.name === 'CLAUDE')?.stale === true) :
42          external.status === 'rejected' || card.rows.some(row => row.used === null) ||
43          (index === 1 && external.value.groups.find(group => group.name === 'CODEX')?.stale === true)
44        // A completely failed fetch must keep every previous row, including labels.
45        let incoming = (index === 0 ? claude.status === 'rejected' && external.status === 'rejected' : external.status === 'rejected')
46          ? { ...card, rows: state.cards[index]?.rows ?? card.rows } : card
47        if (index === 0 && !incoming.rows.some(row => row.star || row.label.includes('Fable')) &&
48            (external.status === 'rejected' || external.value.groups.find(group => group.name === 'CLAUDE')?.stale === true)) {
49          const fable = state.cards[0]?.rows.find(row => row.star || row.label.includes('Fable'))
50          if (fable) incoming = { ...incoming, rows: [...incoming.rows, fable] }
51        }
52        return retainCard(state.cards[index], incoming, failed ? now : undefined)
53      }),
54    }))
55  } finally {
56    await update($, hub, state => ({ ...state, collecting: false }))
57  }
58}
59
60export const register: Register = on => {
61  on('session.start', async ($, e, next) => {
62    await $.command.register({ name: 'usage-hub', description: 'AI使用率のペインを開きます' })
63    void $.ui.open({ id: PANE, title: 'AI Usage Hub' })
64    const now = await $.clock.now()
65    await update($, hub, state => ({ ...state, collecting: false, now }))
66    $.clock.every(300_000, () => { void collect($) })
67    $.clock.every(60_000, () => {
68      void (async () => {
69        const now = await $.clock.now()
70        await update($, hub, state => ({ ...state, now }))
71      })()
72    })
73    void collect($)
74    return next(e)
75  })
76
77  on('command.run', { command: 'usage-hub' }, async $ => {
78    await $.ui.open({ id: PANE, title: 'AI Usage Hub' })
79    return { text: 'AI Usage Hub を開きました' }
80  })
81
82  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
83    const { Box, Text, Button } = $.ui.resolve(e)
84    const state = await read($, hub)
85    const advice = recommend(state.cards)
86    return (
87      <Box flexDirection="column" gap={1}>
88        <Text bold>AI Usage Hub</Text>
89        <Text dimColor>最終更新 {state.updatedAt === null ? '--:--' : timeLabel(state.updatedAt)}</Text>
90        <Button key="refresh" label="更新" onPress={() => { void collect($) }} />
91        {state.collecting && <Text dimColor>取得中…</Text>}
92        {state.cards.map(card => (
93          <Box key={card.name} flexDirection="column" borderStyle="round" borderColor={card.color} paddingX={1}>
94            <Text bold color={card.color}>{card.name}</Text>
95            {card.context !== undefined && <Text dimColor>Context {card.context}%</Text>}
96            {card.rows.map(row => (
97              <Box flexDirection="column">
98                <Text>{row.label}</Text>
99                {row.used === null ? <Text dimColor>{row.state || card.note || 'データなし'}</Text> : (
100                  <Box flexDirection="column">
101                    <Text bold color={card.color}>{row.used}%</Text>
102                    {e.surface === 'terminal' ? (
103                      <Text color={barColor(row.used, card.color)}>{textBar(row.used)}</Text>
104                    ) : (() => {
105                      const { Svg } = $.ui.resolve(e)
106                      return <Svg source={svgBar(row.used, card.color)} alt={`${row.used}% 使用`} height={10} />
107                    })()}
108                    {!!row.reset && <Text dimColor>{resetLabel(row.reset, state.now)}</Text>}
109                  </Box>
110                )}
111              </Box>
112            ))}
113            {!!card.note && <Text dimColor>{card.note}</Text>}
114            {card.failedAt !== undefined && <Text dimColor>取得失敗 {timeLabel(card.failedAt)}</Text>}
115          </Box>
116        ))}
117        {advice !== null && <Text>おすすめ: {advice}</Text>}
118      </Box>
119    )
120  })
121}
122

1import type { SessionUsage } from 'claude-code'
2import type { UsageCard, UsagePayload, UsageRow } from '../types'
3
4const EMPTY_CLAUDE = 'まだ数値がありません（Claude が応答すると出ます）'
5
6// Shared pure conversions: the Node 24 collector and the Mod tests use the same code.
7export function geminiRows(buckets?: { window?: string; remaining_fraction?: unknown; reset_time?: string }[]): UsageRow[] {
8  return (['5h', 'weekly'] as const).map(window => {
9    const bucket = buckets?.find(bucket => bucket.window === window)
10    const remaining = bucket?.remaining_fraction
11    const valid = typeof remaining === 'number' && Number.isFinite(remaining) && remaining >= 0 && remaining <= 1
12    return { label: window === '5h' ? '5時間' : '週次', used: valid ? Math.round((1 - remaining) * 100) : null,
13      reset: bucket?.reset_time ?? null, ...(!valid ? { state: 'データなし' } : {}) }
14  })
15}
16
17export function devinRows(plan?: {
18  dailyQuotaRemainingPercent?: unknown; weeklyQuotaRemainingPercent?: unknown
19  dailyQuotaResetAtUnix?: string; weeklyQuotaResetAtUnix?: string; planInfo?: { planName?: string }
20}): UsageRow[] {
21  return (['daily', 'weekly'] as const).map(window => {
22    const remaining = plan?.[`${window}QuotaRemainingPercent`]
23    const valid = typeof remaining === 'number' && Number.isFinite(remaining) && remaining >= 0 && remaining <= 100
24    const seconds = plan?.[`${window}QuotaResetAtUnix`]
25    const reset = seconds ? new Date(Number(seconds) * 1000) : null
26    return { label: `${window === 'daily' ? '日次' : '週次'}${plan?.planInfo?.planName ? ` · ${plan.planInfo.planName}` : ''}`,
27      used: valid ? 100 - remaining : null,
28      reset: reset && Number.isFinite(reset.getTime()) ? reset.toISOString() : null,
29      ...(!valid ? { state: '取得失敗' } : {}) }
30  })
31}
32
33export function parseUsage(stdout: string): UsagePayload {
34  const data: unknown = JSON.parse(stdout)
35  if (!data || typeof data !== 'object' || !('groups' in data) || !Array.isArray(data.groups)) {
36    throw new Error('Invalid usage groups')
37  }
38  const groups = data.groups.map((group: unknown) => {
39    if (!group || typeof group !== 'object' || !('name' in group) || typeof group.name !== 'string' ||
40        !('rows' in group) || !Array.isArray(group.rows)) throw new Error('Invalid usage group')
41    const rows: UsageRow[] = group.rows.map((row: unknown) => {
42      if (!row || typeof row !== 'object' || !('label' in row) || typeof row.label !== 'string' ||
43          !('used' in row) || !(row.used === null || (typeof row.used === 'number' && Number.isFinite(row.used)))) {
44        throw new Error('Invalid usage row')
45      }
46      return {
47        label: row.label, used: row.used,
48        reset: 'reset' in row && typeof row.reset === 'string' ? row.reset : null,
49        state: 'state' in row && typeof row.state === 'string' ? row.state : undefined,
50        ...('star' in row && row.star === true ? { star: true } : {}),
51      }
52    })
53    return {
54      name: group.name, rows,
55      stale: 'stale' in group && group.stale === true,
56      note: 'note' in group && typeof group.note === 'string' ? group.note : null,
57    }
58  })
59  return { groups }
60}
61
62export function buildCards(payload: UsagePayload | null, usage: SessionUsage | null): UsageCard[] {
63  const codex = payload?.groups.find(group => group.name === 'CODEX')
64  const grok = payload?.groups.find(group => group.name === 'GROK')
65  const claude = payload?.groups.find(group => group.name === 'CLAUDE')
66  const gemini = payload?.groups.find(group => group.name === 'GEMINI')
67  const devin = payload?.groups.find(group => group.name === 'DEVIN')
68  let grokRows = grok?.rows ?? []
69  const [first, second] = grokRows
70  if (grokRows.length === 2 && first && second &&
71      typeof first.used === 'number' && typeof second.used === 'number' && first.used === second.used &&
72      Number.isFinite(Date.parse(first.reset ?? '')) && Date.parse(first.reset!) === Date.parse(second.reset ?? '')) {
73    grokRows = [{ ...first, label: '週次 · 共有枠（Grok + Grok Bot）' }]
74  }
75  const claudeRows = (['five_hour', 'seven_day'] as const).map((kind): UsageRow => {
76    const limit = usage?.rateLimits.find(limit => limit.kind === kind)
77    const fallback = claude?.rows.find(row => kind === 'five_hour' ? row.label === '5時間' :
78      row.label.startsWith('週次') && !row.star && !row.label.includes('Fable'))
79    const used = limit && Number.isFinite(limit.percentUsed) ? limit.percentUsed : fallback?.used ?? null
80    return {
81      label: kind === 'five_hour' ? '5時間' : '週次',
82      used,
83      reset: limit && Number.isFinite(limit.percentUsed) ? limit.resetsAt : fallback?.reset,
84      state: used === null ? fallback?.state || claude?.note || EMPTY_CLAUDE : undefined,
85    }
86  })
87  const fable = claude?.rows.find(row => row.star || row.label.includes('Fable'))
88  if (fable) claudeRows.push({ ...fable, label: '週次 · Fable' })
89  const cards: UsageCard[] = [
90    { name: 'Claude', color: '#d97757', rows: claudeRows, context: usage?.context.percent, note: claude?.note },
91    { name: 'Codex', color: '#59c39a', rows: codex?.rows ?? [], note: codex?.note },
92    { name: 'Grok', color: '#e8e8ea', rows: grokRows, note: grok?.note },
93    { name: 'Gemini', color: '#4c8bf5', rows: gemini?.rows ?? [], note: gemini?.note },
94    { name: 'Devin', color: '#2dd4bf', rows: devin?.rows ?? [], note: devin?.note },
95  ]
96  for (const card of cards.slice(1)) {
97    if (card.rows.length === 0) card.rows = [{ label: '使用率', used: null, state: card.note || 'データなし' }]
98  }
99  return cards
100}
101
102export function retainCard(previous: UsageCard | undefined, incoming: UsageCard, failedAt?: number): UsageCard {
103  if (failedAt === undefined) return incoming
104  if (incoming.rows.every(row => row.used === null) && previous?.rows.some(row => row.used !== null)) {
105    return { ...incoming, rows: previous.rows, context: incoming.context ?? previous.context,
106      note: incoming.note || incoming.rows.find(row => row.state)?.state, failedAt }
107  }
108  const rows = incoming.rows.map(row => {
109    if (row.used !== null) return row
110    const old = previous?.rows.find(old => old.label === row.label) ??
111      (previous?.rows.length === 1 && previous.rows[0]?.label === '週次 · 共有枠（Grok + Grok Bot）'
112        ? { ...previous.rows[0], label: row.label } : undefined) ??
113      (incoming.rows.length === 1 && previous?.rows.length === 1 ? previous.rows[0] : undefined)
114    return old?.used !== null && old?.used !== undefined ? old : row
115  })
116  return { ...incoming, rows, context: incoming.context ?? previous?.context, failedAt }
117}
118
119export function recommend(cards: UsageCard[]): string | null {
120  let best: { name: string; max: number } | undefined
121  for (const card of cards) {
122    const values = card.rows.flatMap(row => row.used === null ? [] : [row.used])
123    if (card.failedAt !== undefined || values.length === 0) continue
124    const max = Math.max(...values)
125    if (!best || max < best.max) best = { name: card.name, max }
126  }
127  if (!best) return null
128  const conserve = cards.find(card => card.name === 'Claude')?.rows.some(row => row.label === '5時間' && (row.used ?? 0) >= 80)
129  return `いまは ${best.name} を使うのがおすすめ${conserve ? ' · Claudeの5時間枠を温存' : ''}`
130}
131
132const pad = (value: number) => String(value).padStart(2, '0')
133
134export function timeLabel(ms: number): string {
135  const date = new Date(ms)
136  return `${pad(date.getHours())}:${pad(date.getMinutes())}`
137}
138
139export function resetLabel(reset: string | null | undefined, now: number): string {
140  const end = Date.parse(reset ?? '')
141  if (!Number.isFinite(end)) return ''
142  const remaining = Math.max(0, end - now)
143  if (remaining === 0) return `リセット ${timeLabel(end)} · リセット待ち`
144  if (remaining < 86_400_000) {
145    const minutes = Math.ceil(remaining / 60_000)
146    return `リセット ${timeLabel(end)} · あと${Math.floor(minutes / 60)}h${minutes % 60}m`
147  }
148  const date = new Date(end)
149  return `リセット ${date.getMonth() + 1}/${date.getDate()} ${timeLabel(end)} · あと${Math.floor(remaining / 86_400_000)}日`
150}
151
152export function barColor(used: number, color: string): string {
153  return used >= 80 ? '#ef4444' : color
154}
155
156export function textBar(used: number): string {
157  const filled = Math.round(Math.min(100, Math.max(0, used)) / 5)
158  return '█'.repeat(filled) + '░'.repeat(20 - filled)
159}
160
161export function svgBar(used: number, color: string): string {
162  const width = Math.min(100, Math.max(0, used)) * 3
163  return `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="10" viewBox="0 0 300 10"><rect width="300" height="10" rx="5" fill="#3f3f46"/><rect width="${width}" height="10" rx="5" fill="${barColor(used, color)}"/></svg>`
164}
165

1export type UsageRow = {
2  label: string
3  used: number | null
4  reset?: string | null
5  state?: string
6  star?: boolean
7}
8
9export type UsageGroup = {
10  name: string
11  rows: UsageRow[]
12  stale?: boolean
13  note?: string | null
14}
15
16export type UsagePayload = { updatedAt?: string; groups: UsageGroup[] }
17
18export type UsageCard = {
19  name: string
20  color: string
21  rows: UsageRow[]
22  note?: string | null
23  context?: number
24  failedAt?: number
25}
26
27export type HubState = {
28  cards: UsageCard[]
29  updatedAt: number | null
30  lastAttempt: number | null
31  collecting: boolean
32  now: number
33}
34
35declare module 'claude-code' {
36  interface PluginState {
37    'ai-usage-hub': { hub: HubState }
38  }
39}
40