desktop-statusline

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, ModelUsage, ProcessRunResult, Register } from 'claude-code'
3
4import type { Limit, Snapshot } from '../types'
5
6const snapshot = atom({ plugin: 'desktop-statusline', key: 'snap' } as const, null)
7const warned = atom({ plugin: 'desktop-statusline', key: 'warned' } as const, [])
8const lastTurn = atom({ plugin: 'desktop-statusline', key: 'lastTurn' } as const, null)
9const compactions = atom({ plugin: 'desktop-statusline', key: 'compactions' } as const, null)
10
11const REFRESH_MS = 60_000
12const WARN_AT = [95, 80]
13const LABELS: Record<string, string> = { five_hour: '5-hour', seven_day: 'Weekly' }
14const LABEL_CELLS = 8
15const PERCENT_CELLS = 5
16const DETAIL_GAP = 2
17const METER_GAP = 3
18const AGENT_ROWS = 3
19// Desktop metrics in CSS px, measured from screenshots of the band: a Box `width` cell, one
20// column of `bodyColumns`, and an average glyph of the band's proportional font. Bars are SVG
21// in px, so the limits row is fitted in px, keeping 5% spare for the estimate.
22const CELL_PX = 15
23const COL_PX = 12.5
24const CHAR_PX = 13
25const SPARE = 0.95
26const MIN_BAR_PX = 60
27const MAX_BAR_PX = 180
28
29const label = (kind: string) => LABELS[kind] ?? kind.replace(/_/g, ' ')
30const tone = (percent: number) => (percent >= 95 ? 'error' : percent >= 80 ? 'warning' : undefined)
31
32const tokens = (n: number) =>
33  n >= 1_000_000 ? `${+(n / 1_000_000).toFixed(1)}M` : n >= 1000 ? `${Math.round(n / 1000)}k` : `${n}`
34
35// Drawn as an image, so it cannot follow the theme: a translucent track reads on light and dark.
36const bar = (percent: number, width: number) => {
37  const fill = percent >= 95 ? '#e5484d' : percent >= 80 ? '#e0a030' : '#2f7de1'
38  const filled = Math.round((Math.min(percent, 100) / 100) * width)
39  return (
40    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="8" viewBox="0 0 ${width} 8">` +
41    `<rect width="${width}" height="8" rx="4" fill="#808080" fill-opacity="0.3"/>` +
42    `<rect width="${filled}" height="8" rx="4" fill="${fill}"/></svg>`
43  )
44}
45
46const until = (iso: string, now: number) => {
47  const minutes = Math.max(0, Math.round((Date.parse(iso) - now) / 60_000))
48  if (minutes < 60) return `${minutes}m`
49  if (minutes < 1440) return `${Math.floor(minutes / 60)}h ${minutes % 60}m`
50  return `${Math.floor(minutes / 1440)}d ${Math.floor((minutes % 1440) / 60)}h`
51}
52
53const elapsed = (ms: number) => {
54  const s = Math.round(ms / 1000)
55  if (s < 60) return `${s}s`
56  if (s < 3600) return `${Math.floor(s / 60)}m ${s % 60}s`
57  return `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}m`
58}
59
60const ago = (ms: number) => {
61  const minutes = Math.floor(ms / 60_000)
62  if (minutes < 1) return '<1m'
63  if (minutes < 60) return `${minutes}m`
64  if (minutes < 1440) return `${Math.floor(minutes / 60)}h ${minutes % 60}m`
65  return `${Math.floor(minutes / 1440)}d ${Math.floor((minutes % 1440) / 60)}h`
66}
67
68const cacheHit = (u: ModelUsage) => {
69  const input = u.input_tokens + u.cache_creation_input_tokens + u.cache_read_input_tokens
70  return input === 0 ? null : Math.round((u.cache_read_input_tokens / input) * 100)
71}
72
73const isOnDesktop = async ($: EngineInterface) => (await $.session.surfaces()).includes('desktop')
74
75// Each git command is written out in full at its call; this only reads the result.
76const output = async (run: Promise<ProcessRunResult>) => {
77  try {
78    const ran = await run
79    return ran.exitCode === 0 ? ran.stdout.trim() : null
80  } catch {
81    return null
82  }
83}
84
85const warn = async ($: EngineInterface, limits: Limit[], now: number) => {
86  const seen = await read($, warned)
87  const fresh: string[] = []
88
89  for (const limit of limits) {
90    const threshold = WARN_AT.find(t => limit.percent >= t)
91    const key = `${limit.kind}@${threshold}@${limit.resetsAt}`
92    if (threshold === undefined || seen.includes(key)) continue
93
94    fresh.push(key)
95    const resets = limit.resetsAt ? ` · resets in ${until(limit.resetsAt, now)}` : ''
96    $.ui.toast(`${label(limit.kind)} usage limit at ${limit.percent}%${resets}`, { timeoutMs: 8000 })
97  }
98
99  if (fresh.length > 0) await update($, warned, s => [...s, ...fresh].slice(-50))
100}
101
102const refresh = async ($: EngineInterface) => {
103  if (!(await isOnDesktop($))) return
104
105  const [usage, cwd, now, agents, prompts] = await Promise.all([
106    $.session.usage(),
107    $.session.cwd(),
108    $.clock.now(),
109    $.agent.list(),
110    $.session.turns(),
111  ])
112  const [status, dirs] = await Promise.all([
113    output($.process.run(['git', 'status', '--porcelain=v2', '--branch'], { cwd, timeoutMs: 5000 })),
114    output($.process.run(['git', 'rev-parse', '--git-dir', '--git-common-dir'], { cwd, timeoutMs: 5000 })),
115  ])
116
117  const lines = status?.split('\n') ?? []
118  const head = lines.find(l => l.startsWith('# branch.head '))?.slice(14)
119  const ab = lines.find(l => l.startsWith('# branch.ab '))?.match(/\+(\d+) -(\d+)/)
120  const [gitDir, commonDir] = dirs?.split('\n') ?? []
121  const limits = usage.rateLimits.map(r => ({
122    kind: r.kind,
123    percent: r.percentUsed,
124    resetsAt: r.resetsAt ?? null,
125  }))
126  const snap: Snapshot = {
127    at: now,
128    startedAt: usage.startedAt,
129    prompts,
130    dir: cwd.split('/').pop() || cwd,
131    branch: head && head !== '(detached)' ? head : null,
132    isWorktree: gitDir !== commonDir,
133    ahead: Number(ab?.[1] ?? 0),
134    behind: Number(ab?.[2] ?? 0),
135    changed: lines.filter(l => l && !l.startsWith('#')).length,
136    costUsd: usage.cost?.usd ?? null,
137    limits,
138    agents: agents
139      .filter(a => a.status === 'running')
140      .map(a => ({ type: a.type, description: a.description })),
141  }
142
143  await update($, snapshot, () => snap)
144  await warn($, limits, now)
145}
146
147export const register: Register = (on, options) => {
148  // The main conversation's prompt-cache TTL (the `cache_ttl` option): 1 hour on a Claude
149  // subscription within plan usage, 5 minutes with pay-as-you-go API billing, a cloud provider or usage credits.
150  const cacheTtlMs = options.cache_ttl === '5m' ? 5 * 60_000 : 60 * 60_000
151
152  on('session.start', async ($, e, next) => {
153    const started = await next(e)
154    await refresh($)
155    $.clock.every(REFRESH_MS, () => void refresh($))
156
157    return started
158  })
159
160  on('session.attach', { surface: 'desktop' }, async ($, e, next) => {
161    const attached = await next(e)
162    await refresh($)
163
164    return attached
165  })
166
167  on('session.measure', async ($, e, next) => {
168    const measured = await next(e)
169    await refresh($)
170
171    return measured
172  })
173
174  on('turn.complete', async ($, e, next) => {
175    const completed = await next(e)
176    if (!e.agentId) {
177      const at = await $.clock.now()
178      await update($, lastTurn, () => ({
179        at,
180        durationMs: e.durationMs,
181        model: e.usage?.model ?? null,
182        cacheHit: e.usage ? cacheHit(e.usage) : null,
183      }))
184    }
185    await refresh($)
186
187    return completed
188  })
189
190  // A spawned agent shows as running only once it has started; look again shortly after.
191  on('tool.call', { tool: 'Agent' }, ($, e, next) => {
192    $.clock.after(2000, () => void refresh($))
193
194    return next(e)
195  })
196
197  on('session.compact', async ($, e, next) => {
198    const result = await next(e)
199    if (e.trigger === 'precompute' || e.agentId || result.messages === undefined) return result
200
201    const { startedAt } = await $.session.usage()
202    await update($, compactions, c => ({
203      since: startedAt,
204      count: (c?.since === startedAt ? c.count : 0) + 1,
205      before: result.tokensBefore ?? null,
206      after: result.tokensAfter ?? null,
207    }))
208
209    return result
210  })
211
212  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
213    if (e.surface !== 'desktop' || e.props.hasSurvey) return next(e)
214
215    const snap = await read($, snapshot)
216    if (snap === null) return next(e)
217
218    const { Box, Svg, Text } = $.ui.resolve(e)
219
220    const meter = (name: string, percent: number | null, detail: string, barPx: number) => (
221      <Box flexDirection="row" alignItems="center">
222        <Box width={LABEL_CELLS} flexShrink={0}>
223          <Text>{name}</Text>
224        </Box>
225        {percent === null ? (
226          <Text dimColor>{'waiting for first response'}</Text>
227        ) : (
228          <Box flexDirection="row" alignItems="center" flexShrink={0}>
229            <Svg source={bar(percent, barPx)} alt={`${name} ${percent}% used`} width={barPx} height={8} />
230            <Box width={PERCENT_CELLS} justifyContent="flex-end">
231              <Text color={tone(percent)}>{`${percent}%`}</Text>
232            </Box>
233          </Box>
234        )}
235        <Box marginLeft={DETAIL_GAP} flexShrink={0}>
236          <Text dimColor>{detail}</Text>
237        </Box>
238      </Box>
239    )
240
241    // Fit the limit meters on one row: try "resets in 2h 8m", then "↻ 2h 8m", and stack them
242    // (the one case of 5 lines) only when even the short form leaves a bar under MIN_BAR_PX.
243    const availPx = e.props.bodyColumns * COL_PX * SPARE
244    const fixedPx = (LABEL_CELLS + PERCENT_CELLS + DETAIL_GAP) * CELL_PX
245    const n = Math.max(1, snap.limits.length)
246    const fit = (isLong: boolean) => {
247      const details = snap.limits.map(l => (l.resetsAt ? `${isLong ? 'resets in ' : '↻ '}${until(l.resetsAt, snap.at)}` : ''))
248      const textPx = details.reduce((sum, d) => sum + d.length * CHAR_PX, 0)
249      const barPx = Math.floor((availPx - n * fixedPx - (n - 1) * METER_GAP * CELL_PX - textPx) / n)
250      return { details, barPx: Math.min(MAX_BAR_PX, barPx) }
251    }
252    const long = fit(true)
253    const { details, barPx: sharedBar } = long.barPx >= MIN_BAR_PX ? long : fit(false)
254    const isStacked = sharedBar < MIN_BAR_PX
255    const longestPx = Math.max(0, ...details.map(d => d.length * CHAR_PX))
256    const limitBar = isStacked
257      ? Math.max(40, Math.min(MAX_BAR_PX, Math.floor(availPx - fixedPx - longestPx)))
258      : sharedBar
259
260    const where =
261      `📁 ${snap.dir}` +
262      (snap.branch === null ? '' : `   🌿 ${snap.branch}${snap.isWorktree ? ' 🌳' : ''}`) +
263      `${snap.ahead ? ` ↑${snap.ahead}` : ''}${snap.behind ? ` ↓${snap.behind}` : ''}` +
264      `${snap.changed ? `   ● ${snap.changed} changed` : ''}`
265    const session =
266      `session ${ago(snap.at - snap.startedAt)} · ${snap.prompts} prompt${snap.prompts === 1 ? '' : 's'}` +
267      (snap.costUsd === null ? '' : ` · $${snap.costUsd.toFixed(2)}`)
268
269    // Bottom line parts: dim unless they need attention (warning) or are live (agents).
270    const activity: { text: string; emphasis?: 'warning' | 'live' }[] = []
271    const turn = await read($, lastTurn)
272    if (turn !== null && turn.at >= snap.startedAt) {
273      const idleMs = Math.max(0, snap.at - turn.at)
274      const isCold = idleMs >= cacheTtlMs
275      activity.push({ text: `Last turn ${elapsed(turn.durationMs)}${turn.model ? ` on ${turn.model}` : ''}` })
276      if (turn.cacheHit !== null) {
277        activity.push({ text: `cache ${turn.cacheHit}%`, emphasis: turn.cacheHit < 50 ? 'warning' : undefined })
278      }
279      if (!e.props.isWorking) {
280        activity.push({ text: `idle ${ago(idleMs)}${isCold ? ' (cache cold)' : ''}`, emphasis: isCold ? 'warning' : undefined })
281      }
282    }
283    const c = await read($, compactions)
284    if (c !== null && c.since === snap.startedAt) {
285      const sizes = c.before === null || c.after === null ? '' : ` (last ${tokens(c.before)} → ${tokens(c.after)})`
286      activity.push({ text: `compacted ${c.count}×${sizes}` })
287    }
288    // Running agents get rows of their own (description truncated, type kept), so a
289    // long description never runs off the "Last turn" line.
290    const agentRows = snap.agents.slice(0, AGENT_ROWS)
291    const moreAgents = snap.agents.length - agentRows.length
292
293    return (
294      <Box flexDirection="column">
295        <Box flexDirection="row" justifyContent="space-between" width="100%">
296          <Text wrap="truncate-end">{where}</Text>
297          <Box marginLeft={2} flexShrink={0}>
298            <Text dimColor>{session}</Text>
299          </Box>
300        </Box>
301        {snap.limits.length > 0 && (
302          <Box flexDirection={isStacked ? 'column' : 'row'} columnGap={METER_GAP}>
303            {snap.limits.map((l, i) => meter(label(l.kind), l.percent, details[i] ?? '', limitBar))}
304          </Box>
305        )}
306        {activity.length > 0 && (
307          <Box flexDirection="row">
308            {activity.map((a, i) => (
309              <Box flexDirection="row">
310                {i > 0 && <Text dimColor>{' · '}</Text>}
311                <Text
312                  wrap="truncate-end"
313                  color={a.emphasis === 'warning' ? 'warning' : undefined}
314                  dimColor={a.emphasis === undefined}
315                >
316                  {a.text}
317                </Text>
318              </Box>
319            ))}
320          </Box>
321        )}
322        {agentRows.map(a => (
323          <Box flexDirection="row" justifyContent="space-between" width="100%">
324            <Text wrap="truncate-end">{`⏳ ${a.description || a.type}`}</Text>
325            <Box marginLeft={2} flexShrink={0}>
326              <Text dimColor>{a.type.split(':').pop()}</Text>
327            </Box>
328          </Box>
329        ))}
330        {moreAgents > 0 && <Text dimColor>{`   +${moreAgents} more agent${moreAgents > 1 ? 's' : ''} running`}</Text>}
331      </Box>
332    )
333  })
334}
335

1export type Limit = { kind: string; percent: number; resetsAt: string | null }
2
3export type Agent = { type: string; description: string }
4
5export type Snapshot = {
6  at: number
7  startedAt: number
8  prompts: number
9  dir: string
10  branch: string | null
11  isWorktree: boolean
12  ahead: number
13  behind: number
14  changed: number
15  costUsd: number | null
16  limits: Limit[]
17  agents: Agent[]
18}
19
20export type TurnStat = {
21  at: number
22  durationMs: number
23  model: string | null
24  cacheHit: number | null
25}
26
27export type Compactions = { since: number; count: number; before: number | null; after: number | null }
28
29declare module 'claude-code' {
30  interface PluginState {
31    'desktop-statusline': {
32      snap: Snapshot | null
33      warned: string[]
34      lastTurn: TurnStat | null
35      compactions: Compactions | null
36    }
37  }
38}
39