session-dash

1import { atom, read, update } from 'claude-code'
2import type { Register } from 'claude-code'
3
4import {
5  EMPTY,
6  countTool,
7  countTurn,
8  formatDuration,
9  formatTokens,
10  rasterCells,
11  sparkline,
12} from './stats'
13
14const PANE = 'session-dash'
15const ACCENT = '#d97757'
16const stats = atom({ plugin: 'session-dash', key: 'stats' } as const, EMPTY)
17
18const FILE_TOOLS = new Set(['Read', 'Edit', 'Write', 'NotebookEdit'])
19
20function pathOf(input: object): string | undefined {
21  const value =
22    'file_path' in input ? input.file_path : 'notebook_path' in input ? input.notebook_path : undefined
23  return typeof value === 'string' ? value : undefined
24}
25
26export const register: Register = on => {
27  on('session.start', async ($, e, next) => {
28    await $.command.register({
29      name: 'dash',
30      description: 'Toggle the session dashboard pane',
31    })
32
33    return next(e)
34  })
35
36  on('command.run', { command: 'dash' }, async $ => {
37    const isOpen = (await $.ui.panes()).some(pane => pane.id === PANE)
38    if (isOpen) {
39      await $.ui.close({ id: PANE })
40      return { text: 'Session dashboard closed.' }
41    }
42
43    await $.ui.open({ id: PANE, title: 'Session' })
44    return { text: 'Session dashboard opened. /dash again to close it.' }
45  })
46
47  on('tool.call', async ($, e, next) => {
48    const ran = await next(e)
49    const path = FILE_TOOLS.has(e.tool) ? pathOf(e) : undefined
50    await update($, stats, current =>
51      countTool(current, e.tool, {
52        isDenied: ran.deny !== undefined,
53        isError: ran.isError === true,
54        ...(path === undefined ? {} : { path }),
55      }),
56    )
57
58    return ran
59  })
60
61  on('turn.complete', async ($, e, next) => {
62    await update($, stats, current =>
63      countTurn(current, {
64        durationMs: e.durationMs,
65        isMainLoop: e.agentId === undefined,
66        ...(e.usage === undefined ? {} : { usage: e.usage }),
67      }),
68    )
69
70    return next(e)
71  })
72
73  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
74    const { Box, Text, Button } = $.ui.resolve(e)
75    const current = await read($, stats)
76    const width = Math.max(20, e.props.bodyColumns)
77
78    const tools = Object.entries(current.toolCounts).sort((a, b) => b[1] - a[1])
79    const totalCalls = tools.reduce((sum, [, count]) => sum + count, 0)
80    const topCount = tools[0]?.[1] ?? 1
81    const nameWidth = Math.min(14, Math.max(4, ...tools.map(([name]) => name.length)))
82    const barRoom = Math.max(4, width - nameWidth - 7)
83
84    const turns = current.turnDurations
85    const totalTime = turns.reduce((sum, ms) => sum + ms, 0)
86    const spark = sparkline(turns.slice(-width))
87
88    let sparkNode = <Text dimColor>No turns yet.</Text>
89    if (turns.length > 0 && e.surface === 'terminal') {
90      const { Raster } = $.ui.resolve(e)
91      sparkNode = <Raster key="spark" columns={[...spark].length} rows={1} cells={rasterCells(spark, 0xd97757)} />
92    } else if (turns.length > 0) {
93      sparkNode = <Text color={ACCENT}>{spark}</Text>
94    }
95
96    const shortName = (name: string) =>
97      name.length > nameWidth ? `${name.slice(0, nameWidth - 1)}…` : name.padEnd(nameWidth)
98
99    return (
100      <Box flexDirection="column">
101        <Text bold>
102          {turns.length} turns · {formatDuration(totalTime)} · {formatTokens(current.tokensIn)} in ·{' '}
103          {formatTokens(current.tokensOut)} out
104        </Text>
105        {(current.blocked > 0 || current.errors > 0) && (
106          <Text color="#c0504d">
107            {current.blocked} blocked · {current.errors} errored
108          </Text>
109        )}
110
111        <Box flexDirection="column" marginTop={1}>
112          <Text dimColor>Tools ({totalCalls} calls)</Text>
113          {tools.length === 0 && <Text dimColor>No tool calls yet.</Text>}
114          {tools.slice(0, 8).map(([name, count]) => (
115            <Text>
116              {shortName(name)} <Text color={ACCENT}>{'█'.repeat(Math.max(1, Math.round((count / topCount) * barRoom)))}</Text>{' '}
117              {count}
118            </Text>
119          ))}
120        </Box>
121
122        <Box flexDirection="column" marginTop={1}>
123          <Text dimColor>
124            Turn time (last {turns.length}){turns.length > 0 ? ` · max ${formatDuration(Math.max(...turns))}` : ''}
125          </Text>
126          {sparkNode}
127        </Box>
128
129        <Box flexDirection="column" marginTop={1}>
130          <Text dimColor>Recent files ({current.files.length})</Text>
131          {current.files.length === 0 && <Text dimColor>None yet.</Text>}
132          {current.files
133            .slice(-8)
134            .reverse()
135            .map(file => (
136              <Text wrap="truncate-start">{file}</Text>
137            ))}
138        </Box>
139
140        <Box marginTop={1} columnGap={1}>
141          <Button key="reset" label="Reset" hotkey="r" onPress={() => update($, stats, () => EMPTY)} />
142          <Button key="close" label="Close" hotkey="q" role="dismiss" onPress={() => $.ui.close({ id: PANE })} />
143        </Box>
144      </Box>
145    )
146  })
147}
148

1import type { TurnUsage } from 'claude-code'
2
3import type { DashStats } from '../types'
4
5export const EMPTY: DashStats = {
6  toolCounts: {},
7  blocked: 0,
8  errors: 0,
9  files: [],
10  tokensIn: 0,
11  tokensOut: 0,
12  turnDurations: [],
13}
14
15const MAX_FILES = 50
16const MAX_TURNS = 30
17
18export function countTool(
19  stats: DashStats,
20  tool: string,
21  outcome: { isDenied: boolean; isError: boolean; path?: string },
22): DashStats {
23  const files =
24    outcome.path === undefined || outcome.isDenied
25      ? stats.files
26      : [...stats.files.filter(file => file !== outcome.path), outcome.path].slice(-MAX_FILES)
27
28  return {
29    ...stats,
30    toolCounts: { ...stats.toolCounts, [tool]: (stats.toolCounts[tool] ?? 0) + 1 },
31    blocked: stats.blocked + (outcome.isDenied ? 1 : 0),
32    errors: stats.errors + (outcome.isError ? 1 : 0),
33    files,
34  }
35}
36
37export function countTurn(
38  stats: DashStats,
39  turn: { durationMs: number; usage?: TurnUsage; isMainLoop: boolean },
40): DashStats {
41  const usage = turn.usage
42  return {
43    ...stats,
44    tokensIn:
45      stats.tokensIn +
46      (usage === undefined
47        ? 0
48        : usage.input_tokens + usage.cache_read_input_tokens + usage.cache_creation_input_tokens),
49    tokensOut: stats.tokensOut + (usage?.output_tokens ?? 0),
50    turnDurations: turn.isMainLoop
51      ? [...stats.turnDurations, turn.durationMs].slice(-MAX_TURNS)
52      : stats.turnDurations,
53  }
54}
55
56export function formatDuration(ms: number): string {
57  const seconds = Math.round(ms / 1000)
58  if (seconds < 60) return `${seconds}s`
59  const minutes = Math.floor(seconds / 60)
60  if (minutes < 60) return `${minutes}m${String(seconds % 60).padStart(2, '0')}s`
61  return `${Math.floor(minutes / 60)}h${String(minutes % 60).padStart(2, '0')}m`
62}
63
64export function formatTokens(count: number): string {
65  if (count < 1000) return String(count)
66  if (count < 1_000_000) return `${(count / 1000).toFixed(1)}k`
67  return `${(count / 1_000_000).toFixed(2)}M`
68}
69
70const SPARKS = '▁▂▃▄▅▆▇█'
71
72/** One spark glyph per value, scaled to the largest. */
73export function sparkline(values: readonly number[]): string {
74  const max = Math.max(1, ...values)
75  return values
76    .map(value => SPARKS[Math.min(SPARKS.length - 1, Math.floor((value / max) * (SPARKS.length - 1)))] ?? ' ')
77    .join('')
78}
79
80const DEFAULT_COLOR = 0x01000000
81
82/** Packs a one-row Raster: each glyph in `color` over the terminal's own background. */
83export function rasterCells(glyphs: string, color: number): string {
84  const chars = [...glyphs]
85  const words = new Uint32Array(chars.length * 3)
86  chars.forEach((char, index) => {
87    words[index * 3] = char.codePointAt(0) ?? 0x20
88    words[index * 3 + 1] = color
89    words[index * 3 + 2] = DEFAULT_COLOR
90  })
91  const bytes = new Uint8Array(words.buffer)
92  let binary = ''
93  for (const byte of bytes) binary += String.fromCharCode(byte)
94  return btoa(binary)
95}
96

1export type DashStats = {
2  toolCounts: Record<string, number>
3  blocked: number
4  errors: number
5  files: string[]
6  tokensIn: number
7  tokensOut: number
8  turnDurations: number[]
9}
10
11declare module 'claude-code' {
12  interface PluginState {
13    'session-dash': { stats: DashStats }
14  }
15}
16