session-hud

1import type {
2  ContextMcpTool,
3  EngineInterface,
4  Register,
5  SessionContextBreakdown,
6  SessionRateLimit,
7  SessionUsage,
8} from 'claude-code'
9import {
10  DEFAULT_CONTEXT_MAX_TOKENS,
11  MAX_CONTEXT_MAX_TOKENS,
12  MIN_CONTEXT_MAX_TOKENS,
13} from './config.ts'
14
15const PANE = 'context-breakdown'
16const MCP_SERVER_LIMIT = 5
17const MCP_TOOLS_PER_PAGE = 10
18const BRANCH_REFRESH_INTERVAL_MS = 5_000
19
20let breakdown: SessionContextBreakdown | null = null
21let breakdownError = ''
22let breakdownLoading = false
23let detailUsage: SessionUsage | null = null
24let selectedMcpServer: string | null = null
25let mcpPage = 0
26let branchRefreshStarted = false
27let branchRefreshing = false
28let editingContextTarget = false
29let contextTargetDraft = ''
30let contextTargetError = ''
31
32type BranchState = {
33  kind: 'loading' | 'branch' | 'default' | 'detached' | 'none' | 'error'
34  label: string
35}
36
37let branchState: BranchState = {
38  kind: 'loading',
39  label: 'Checking branch',
40}
41
42type McpServerGroup = {
43  name: string
44  loadedTokens: number
45  loadedTools: number
46  deferredTools: number
47  tools: ContextMcpTool[]
48}
49
50function meter(percent: number, width: number): { filled: string; remaining: string } {
51  const safePercent = Math.min(Math.max(percent, 0), 100)
52  const rounded = Math.round((safePercent / 100) * width)
53  const filled = safePercent > 0 ? Math.max(1, rounded) : 0
54  return {
55    filled: '█'.repeat(filled),
56    remaining: '░'.repeat(width - filled),
57  }
58}
59
60function rateLimitLabel(kind: string): string {
61  if (kind === 'five_hour') return '5h'
62  if (kind === 'seven_day') return '7d'
63  return kind.replaceAll('_', ' ')
64}
65
66function rateLimitTitle(limit: SessionRateLimit): string {
67  if (limit.kind === 'five_hour') return 'Five-hour usage'
68  if (limit.kind === 'seven_day') return 'Weekly usage'
69  return rateLimitLabel(limit.kind)
70}
71
72function resetLabel(resetsAt?: string): string {
73  if (!resetsAt) return ''
74
75  const date = new Date(resetsAt)
76  if (Number.isNaN(date.getTime())) return ''
77
78  return `Resets ${date.toLocaleString([], {
79    weekday: 'short',
80    hour: 'numeric',
81    minute: '2-digit',
82  })}`
83}
84
85function tokenLabel(tokens: number): string {
86  if (tokens >= 1_000_000) {
87    const millions = tokens / 1_000_000
88    return `${Number.isInteger(millions) ? millions : millions.toFixed(1)}m`
89  }
90
91  return `${Math.round(tokens / 1_000)}k`
92}
93
94function detailTokenLabel(tokens: number): string {
95  if (tokens >= 1_000_000) {
96    const millions = tokens / 1_000_000
97    return `${Number.isInteger(millions) ? millions : millions.toFixed(1)}m`
98  }
99
100  if (tokens >= 10_000) return `${Math.round(tokens / 1_000)}k`
101  if (tokens >= 1_000) return `${(tokens / 1_000).toFixed(1)}k`
102  return tokens.toLocaleString()
103}
104
105function contextMaxTokens(value: unknown): number {
106  if (typeof value !== 'number' || !Number.isFinite(value)) {
107    return DEFAULT_CONTEXT_MAX_TOKENS
108  }
109
110  return Math.min(
111    MAX_CONTEXT_MAX_TOKENS,
112    Math.max(MIN_CONTEXT_MAX_TOKENS, Math.round(value)),
113  )
114}
115
116function parseContextTarget(answer: string): number | null {
117  const normalized = answer.trim().toLowerCase().replaceAll(',', '').replaceAll('_', '')
118  const match = normalized.match(/^(\d+(?:\.\d+)?)\s*([km])?$/)
119  if (!match) return null
120
121  const amount = Number(match[1])
122  const multiplier = match[2] === 'm' ? 1_000_000 : match[2] === 'k' ? 1_000 : 1
123  const tokens = Math.round(amount * multiplier)
124
125  if (tokens < MIN_CONTEXT_MAX_TOKENS || tokens > MAX_CONTEXT_MAX_TOKENS) return null
126  return tokens
127}
128
129async function saveContextTarget($: EngineInterface, answer: string): Promise<void> {
130  contextTargetDraft = answer
131  contextTargetError = ''
132
133  try {
134    const target = parseContextTarget(answer)
135
136    if (!target) {
137      contextTargetError = 'Enter 10k to 10m, such as 300k or 1m.'
138      $.ui.invalidate('ui.render')
139      return
140    }
141
142    const result = await $.config.set({
143      key: 'session-hud.context_max_tokens',
144      value: target,
145    })
146
147    if ('deny' in result && result.deny) {
148      contextTargetError = result.deny
149      $.ui.invalidate('ui.render')
150      return
151    }
152
153    editingContextTarget = false
154    contextTargetError = ''
155    $.ui.invalidate('ui.render')
156  } catch {
157    contextTargetError = 'The context target could not be saved.'
158    $.ui.invalidate('ui.render')
159  }
160}
161
162function percentage(tokens: number, total: number): string {
163  if (total <= 0) return '0%'
164  const value = (tokens / total) * 100
165  return `${value >= 10 ? Math.round(value) : value.toFixed(1)}%`
166}
167
168function usageColor(percent: number): 'success' | 'warning' | 'error' {
169  if (percent >= 90) return 'error'
170  if (percent >= 70) return 'warning'
171  return 'success'
172}
173
174function branchColor(kind: BranchState['kind']): 'success' | 'warning' | 'inactive' {
175  if (kind === 'branch') return 'success'
176  if (kind === 'default' || kind === 'detached') return 'warning'
177  return 'inactive'
178}
179
180function compactBranchName(name: string, maxLength = 36): string {
181  if (name.length <= maxLength) return name
182
183  const tailLength = 10
184  const headLength = maxLength - tailLength - 3
185  return `${name.slice(0, headLength)}...${name.slice(-tailLength)}`
186}
187
188function updateBranch($: EngineInterface, nextState: BranchState): void {
189  if (branchState.kind === nextState.kind && branchState.label === nextState.label) return
190
191  branchState = nextState
192  $.ui.invalidate('ui.render')
193}
194
195async function refreshBranch($: EngineInterface, cwd?: string): Promise<void> {
196  if (branchRefreshing) return
197
198  branchRefreshing = true
199
200  try {
201    const directory = cwd ?? await $.session.cwd()
202    const current = await $.process.run(['git', 'branch', '--show-current'], {
203      cwd: directory,
204      timeoutMs: 5_000,
205    })
206
207    if (current.exitCode !== 0) {
208      updateBranch($, { kind: 'none', label: 'Not a Git repository' })
209      return
210    }
211
212    const name = current.stdout.trim()
213    if (name) {
214      updateBranch($, {
215        kind: name === 'main' || name === 'master' ? 'default' : 'branch',
216        label: compactBranchName(name),
217      })
218      return
219    }
220
221    const commit = await $.process.run(['git', 'rev-parse', '--short', 'HEAD'], {
222      cwd: directory,
223      timeoutMs: 5_000,
224    })
225    const shortCommit = commit.stdout.trim()
226
227    updateBranch($, commit.exitCode === 0 && shortCommit
228      ? { kind: 'detached', label: `detached@${shortCommit}` }
229      : { kind: 'none', label: 'Not a Git repository' })
230  } catch {
231    updateBranch($, { kind: 'error', label: 'Branch unavailable' })
232  } finally {
233    branchRefreshing = false
234  }
235}
236
237function friendlyName(value: string, maxLength = 28): string {
238  const readable = value.replaceAll('_', ' ')
239  if (readable.length <= maxLength) return readable
240  return `${readable.slice(0, Math.max(1, maxLength - 3))}...`
241}
242
243function toolName(tool: ContextMcpTool): string {
244  const prefix = `mcp__${tool.serverName}__`
245  const shortName = tool.name.startsWith(prefix) ? tool.name.slice(prefix.length) : tool.name
246  return friendlyName(shortName, 32)
247}
248
249function groupMcpTools(tools: readonly ContextMcpTool[]): McpServerGroup[] {
250  const groups = new Map<string, ContextMcpTool[]>()
251
252  for (const tool of tools) {
253    const group = groups.get(tool.serverName) ?? []
254    group.push(tool)
255    groups.set(tool.serverName, group)
256  }
257
258  return [...groups.entries()]
259    .map(([name, serverTools]) => ({
260      name,
261      loadedTokens: serverTools
262        .filter(tool => tool.isLoaded)
263        .reduce((total, tool) => total + tool.tokens, 0),
264      loadedTools: serverTools.filter(tool => tool.isLoaded).length,
265      deferredTools: serverTools.filter(tool => !tool.isLoaded).length,
266      tools: [...serverTools].sort((left, right) => {
267        if (left.isLoaded !== right.isLoaded) return left.isLoaded ? -1 : 1
268        return right.tokens - left.tokens || left.name.localeCompare(right.name)
269      }),
270    }))
271    .sort((left, right) => {
272      return right.loadedTokens - left.loadedTokens || left.name.localeCompare(right.name)
273    })
274}
275
276async function refreshBreakdown($: EngineInterface, columns: number): Promise<void> {
277  if (breakdownLoading) return
278
279  breakdownLoading = true
280  breakdownError = ''
281  $.ui.invalidate('ui.render')
282
283  try {
284    const usage = await $.session.usage({ breakdown: 'full', columns })
285    detailUsage = usage
286    breakdown = usage.context.breakdown ?? null
287    if (!breakdown) breakdownError = 'Claude Code did not return a context breakdown yet.'
288  } catch (error) {
289    breakdownError = error instanceof Error ? error.message : String(error)
290  } finally {
291    breakdownLoading = false
292    $.ui.invalidate('ui.render')
293  }
294}
295
296async function openBreakdown($: EngineInterface): Promise<void> {
297  selectedMcpServer = null
298  mcpPage = 0
299  await $.ui.open({
300    id: PANE,
301    title: 'Session',
302    focus: true,
303    closeOnEscape: true,
304    columns: 58,
305  })
306  await refreshBreakdown($, 58)
307}
308
309export const register: Register = (on, options) => {
310  const contextTarget = contextMaxTokens(options.context_max_tokens)
311
312  on('session.start', async ($, event, next) => {
313    branchState = { kind: 'loading', label: 'Checking branch' }
314    await refreshBranch($, event.cwd)
315
316    if (!branchRefreshStarted) {
317      branchRefreshStarted = true
318      $.clock.every(BRANCH_REFRESH_INTERVAL_MS, () => {
319        void refreshBranch($)
320      })
321    }
322
323    return next(event)
324  })
325
326  on('tool.call', { tool: 'Bash' }, async ($, event, next) => {
327    const result = await next(event)
328    await refreshBranch($)
329    return result
330  }).catch(($, event, next) => next(event))
331
332  on('session.measure', ($, event, next) => {
333    $.ui.invalidate('ui.render')
334    return next(event)
335  })
336
337  on('ui.render', { component: 'AbovePrompt' }, async ($, event, next) => {
338    if (event.props.hasSurvey) return next(event)
339
340    const { Box, Button, Text } = $.ui.resolve(event)
341    const usage = await $.session.usage()
342    const tokens = usage.context.tokens ?? 0
343    const percent = Math.max(0, Math.round((tokens / contextTarget) * 100))
344    const width = Math.max(8, Math.min(20, event.props.bodyColumns - 50))
345    const weeklyLimit = usage.rateLimits.find(limit => limit.kind === 'seven_day')
346    const meterColor = usageColor(percent)
347    const contextMeter = meter(percent, width)
348
349    return (
350      <Box flexDirection="column">
351        <Box gap={2} alignItems="center" flexWrap="wrap">
352          <Box gap={1} alignItems="center">
353            <Text dimColor>Branch</Text>
354            <Text bold color={branchColor(branchState.kind)}>{branchState.label}</Text>
355          </Box>
356          <Box gap={1} alignItems="center" flexWrap="wrap">
357            <Text bold>Context {percent}% of {tokenLabel(contextTarget)}</Text>
358            <Box>
359              <Text color={meterColor}>{contextMeter.filled}</Text>
360              <Text color="inactive">{contextMeter.remaining}</Text>
361            </Box>
362            {weeklyLimit && <Text dimColor>Week {weeklyLimit.percentUsed}%</Text>}
363            <Button
364              key="context-details"
365              label="Details"
366              plain
367              onPress={() => {
368                void openBreakdown($)
369              }}
370            />
371          </Box>
372        </Box>
373      </Box>
374    )
375  })
376
377  on('ui.render', { component: 'Pane', requestId: PANE }, ($, event) => {
378    const { Box, Button, Text } = $.ui.resolve(event)
379    const current = breakdown
380
381    if (!current) {
382      return (
383        <Box flexDirection="column" gap={1}>
384          <Box justifyContent="space-between" alignItems="center" width="100%">
385            <Text bold>Session Details</Text>
386            <Button
387              key="refresh-context"
388              label={breakdownLoading ? 'Counting' : 'Refresh'}
389              hotkey="r"
390              plain
391              dimColor
392              onPress={() => {
393                void refreshBreakdown($, event.props.bodyColumns)
394              }}
395            />
396          </Box>
397          {breakdownError ? (
398            <Text color="error">{breakdownError}</Text>
399          ) : (
400            <Text dimColor>Counting context tokens...</Text>
401          )}
402        </Box>
403      )
404    }
405
406    const usedCategories = current.categories
407      .filter(category => category.kind === 'used')
408      .sort((left, right) => right.tokens - left.tokens)
409    const freeTokens = current.categories
410      .filter(category => category.kind === 'free')
411      .reduce((total, category) => total + category.tokens, 0)
412    const bufferTokens = current.categories
413      .filter(category => category.kind === 'buffer')
414      .reduce((total, category) => total + category.tokens, 0)
415    const deferredTokens = current.categories
416      .filter(category => category.kind === 'deferred')
417      .reduce((total, category) => total + category.tokens, 0)
418    const personalPercent = Math.max(
419      0,
420      Math.round((current.totalTokens / contextTarget) * 100),
421    )
422    const windowPercent = Math.max(
423      0,
424      Math.round((current.totalTokens / current.rawMaxTokens) * 100),
425    )
426    const barWidth = Math.max(12, Math.min(34, event.props.bodyColumns - 8))
427    const shortBarWidth = Math.max(10, Math.min(22, event.props.bodyColumns - 20))
428    const progressBar = (
429      percent: number,
430      width: number,
431      color: 'success' | 'warning' | 'error' = 'success',
432    ) => {
433      const progress = meter(percent, width)
434      return (
435        <Box>
436          <Text color={color}>{progress.filled}</Text>
437          <Text color="inactive">{progress.remaining}</Text>
438        </Box>
439      )
440    }
441    const mcpServers = groupMcpTools(current.mcpTools)
442    const rateLimits = detailUsage?.rateLimits.filter(limit => (
443      limit.kind === 'five_hour' || limit.kind === 'seven_day'
444    )) ?? []
445    const mcpLoadedTokens = mcpServers.reduce((total, server) => total + server.loadedTokens, 0)
446    const selectedServer = mcpServers.find(server => server.name === selectedMcpServer)
447    const maxMcpPage = selectedServer
448      ? Math.max(0, Math.ceil(selectedServer.tools.length / MCP_TOOLS_PER_PAGE) - 1)
449      : 0
450    const visibleMcpPage = Math.min(mcpPage, maxMcpPage)
451    const visibleMcpTools = selectedServer?.tools.slice(
452      visibleMcpPage * MCP_TOOLS_PER_PAGE,
453      (visibleMcpPage + 1) * MCP_TOOLS_PER_PAGE,
454    ) ?? []
455    const serverPicker = event.surface === 'mobile' ? (
456      <Text dimColor>Tool details are available in desktop and terminal.</Text>
457    ) : (() => {
458      const { Select } = $.ui.resolve(event)
459      return (
460        <Select
461          key="mcp-server-select"
462          label="Tool details"
463          value={selectedServer?.name ?? ''}
464          options={[
465            { value: '', label: 'Choose a server' },
466            ...mcpServers.map(server => ({
467              value: server.name,
468              label: `${friendlyName(server.name, 32)} (${server.tools.length})`,
469            })),
470          ]}
471          onSelect={value => {
472            selectedMcpServer = value || null
473            mcpPage = 0
474            $.ui.invalidate('ui.render')
475          }}
476        />
477      )
478    })()
479    const contextTargetEditor = !editingContextTarget ? null : event.surface === 'mobile' ? (
480      <Text dimColor>Change Context target from /config.</Text>
481    ) : (() => {
482      const { Input } = $.ui.resolve(event)
483      return (
484        <Box flexDirection="column">
485          <Input
486            key="context-target-input"
487            label="Target"
488            value={contextTargetDraft}
489            placeholder="300k"
490            submitLabel="Save"
491            autoFocus
492            onInput={value => {
493              contextTargetDraft = value
494              contextTargetError = ''
495            }}
496            onSubmit={value => {
497              void saveContextTarget($, value)
498            }}
499          />
500          {contextTargetError && <Text color="error">{contextTargetError}</Text>}
501        </Box>
502      )
503    })()
504
505    return (
506      <Box flexDirection="column" gap={1}>
507        <Box justifyContent="space-between" alignItems="center" width="100%">
508          <Text bold>Session Details</Text>
509          <Button
510            key="refresh-context"
511            label={breakdownLoading ? 'Counting' : 'Refresh'}
512            hotkey="r"
513            plain
514            dimColor
515            onPress={() => {
516              void refreshBreakdown($, event.props.bodyColumns)
517            }}
518          />
519        </Box>
520
521        <Box flexDirection="column">
522          <Box justifyContent="space-between" width="100%">
523            <Box gap={1} alignItems="center">
524              <Text bold>{detailTokenLabel(current.totalTokens)} / {tokenLabel(contextTarget)} target</Text>
525              <Button
526                key="change-context-target"
527                label={editingContextTarget ? 'Cancel' : 'Change'}
528                plain
529                dimColor
530                onPress={() => {
531                  editingContextTarget = !editingContextTarget
532                  contextTargetDraft = editingContextTarget ? tokenLabel(contextTarget) : ''
533                  contextTargetError = ''
534                  $.ui.invalidate('ui.render')
535                }}
536              />
537            </Box>
538            <Text color={usageColor(personalPercent)} bold>{personalPercent}%</Text>
539          </Box>
540          {contextTargetEditor}
541          {progressBar(personalPercent, barWidth, usageColor(personalPercent))}
542          <Text dimColor>{current.model} · {tokenLabel(current.rawMaxTokens)} model window</Text>
543        </Box>
544
545        <Box flexDirection="column" gap={1} marginTop={1}>
546          <Text bold>Account usage</Text>
547          {rateLimits.length > 0 ? rateLimits.map(limit => (
548            <Box key={limit.kind} flexDirection="column">
549              <Box justifyContent="space-between" width="100%" gap={1}>
550                <Text>{rateLimitTitle(limit)}</Text>
551                <Text color={usageColor(limit.percentUsed)} bold>{limit.percentUsed}%</Text>
552              </Box>
553              {progressBar(limit.percentUsed, barWidth, usageColor(limit.percentUsed))}
554              {limit.resetsAt && <Text dimColor>{resetLabel(limit.resetsAt)}</Text>}
555            </Box>
556          )) : (
557            <Text dimColor>Rate-limit usage is not available yet.</Text>
558          )}
559          {detailUsage?.cost && (
560            <Box justifyContent="space-between" width="100%">
561              <Text>Session cost</Text>
562              <Text dimColor>${detailUsage.cost.usd.toFixed(2)}</Text>
563            </Box>
564          )}
565        </Box>
566
567        <Box flexDirection="column" gap={1}>
568          <Text bold>What is using context</Text>
569          {usedCategories.map(category => {
570            const share = current.totalTokens > 0
571              ? (category.tokens / current.totalTokens) * 100
572              : 0
573
574            return (
575              <Box key={`${category.kind}:${category.name}`} flexDirection="column">
576                <Box justifyContent="space-between" width="100%" gap={1}>
577                  <Text wrap="truncate">{category.name}</Text>
578                  <Text dimColor>{detailTokenLabel(category.tokens)} · {percentage(category.tokens, current.totalTokens)}</Text>
579                </Box>
580                {progressBar(share, barWidth)}
581              </Box>
582            )
583          })}
584        </Box>
585
586        <Box flexDirection="column" marginTop={1}>
587          <Box justifyContent="space-between" width="100%">
588            <Text bold>Model window</Text>
589            <Text dimColor>{detailTokenLabel(current.totalTokens)} / {tokenLabel(current.rawMaxTokens)}</Text>
590          </Box>
591          {progressBar(windowPercent, barWidth, usageColor(windowPercent))}
592          <Box gap={2} flexWrap="wrap">
593            {freeTokens > 0 && <Text dimColor>Free {detailTokenLabel(freeTokens)}</Text>}
594            {bufferTokens > 0 && <Text dimColor>Buffer {detailTokenLabel(bufferTokens)}</Text>}
595            {deferredTokens > 0 && <Text dimColor>Deferred {detailTokenLabel(deferredTokens)}</Text>}
596          </Box>
597        </Box>
598
599        {mcpServers.length > 0 && (
600          <Box flexDirection="column" gap={1} marginTop={1}>
601            <Box justifyContent="space-between" width="100%">
602              <Text bold>MCP servers</Text>
603              <Text dimColor>{detailTokenLabel(mcpLoadedTokens)} loaded</Text>
604            </Box>
605
606            {mcpServers.slice(0, MCP_SERVER_LIMIT).map(server => {
607              const share = mcpLoadedTokens > 0
608                ? (server.loadedTokens / mcpLoadedTokens) * 100
609                : 0
610
611              return (
612                <Box key={`mcp-server-${server.name}`} flexDirection="column">
613                  <Box justifyContent="space-between" width="100%" gap={1}>
614                    <Text wrap="truncate">{friendlyName(server.name)}</Text>
615                    <Text dimColor>
616                      {detailTokenLabel(server.loadedTokens)} · {server.loadedTools}/{server.tools.length} tools
617                    </Text>
618                  </Box>
619                  {progressBar(share, barWidth)}
620                </Box>
621              )
622            })}
623
624            {mcpServers.length > MCP_SERVER_LIMIT && (
625              <Text dimColor>{mcpServers.length - MCP_SERVER_LIMIT} more servers in the picker</Text>
626            )}
627
628            {serverPicker}
629
630            {selectedServer && (
631              <Box flexDirection="column" gap={1}>
632                <Box justifyContent="space-between" alignItems="center" width="100%">
633                  <Text bold>{friendlyName(selectedServer.name)} tools</Text>
634                  <Box gap={1}>
635                    <Text dimColor>
636                      {visibleMcpPage * MCP_TOOLS_PER_PAGE + 1}-{Math.min((visibleMcpPage + 1) * MCP_TOOLS_PER_PAGE, selectedServer.tools.length)} of {selectedServer.tools.length}
637                    </Text>
638                    {visibleMcpPage > 0 && (
639                      <Button
640                        key="mcp-previous"
641                        label="Previous"
642                        plain
643                        onPress={() => {
644                          mcpPage = Math.max(0, visibleMcpPage - 1)
645                          $.ui.invalidate('ui.render')
646                        }}
647                      />
648                    )}
649                    {visibleMcpPage < maxMcpPage && (
650                      <Button
651                        key="mcp-next"
652                        label="Next"
653                        plain
654                        onPress={() => {
655                          mcpPage = Math.min(maxMcpPage, visibleMcpPage + 1)
656                          $.ui.invalidate('ui.render')
657                        }}
658                      />
659                    )}
660                  </Box>
661                </Box>
662
663                {visibleMcpTools.map(tool => (
664                  <Box key={`${tool.serverName}:${tool.name}`} flexDirection="column">
665                    <Box justifyContent="space-between" width="100%" gap={1}>
666                      <Text color={tool.isLoaded ? 'success' : 'inactive'} wrap="truncate">
667                        {toolName(tool)}
668                      </Text>
669                      <Text dimColor>
670                        {tool.isLoaded ? detailTokenLabel(tool.tokens) : 'deferred'}
671                      </Text>
672                    </Box>
673                    {tool.isLoaded && (
674                      progressBar(selectedServer.loadedTokens > 0
675                        ? (tool.tokens / selectedServer.loadedTokens) * 100
676                        : 0, shortBarWidth)
677                    )}
678                  </Box>
679                ))}
680
681                {selectedServer.deferredTools > 0 && (
682                  <Text dimColor>
683                    {selectedServer.deferredTools} deferred schemas are outside active context.
684                  </Text>
685                )}
686              </Box>
687            )}
688          </Box>
689        )}
690
691        <Text dimColor>
692          Messages is the conversation total. Per-message counts are not available.
693        </Text>
694        {breakdownError && <Text color="error">Last refresh failed: {breakdownError}</Text>}
695      </Box>
696    )
697  })
698}
699

1export const DEFAULT_CONTEXT_MAX_TOKENS = 300_000
2export const MIN_CONTEXT_MAX_TOKENS = 10_000
3export const MAX_CONTEXT_MAX_TOKENS = 10_000_000
4