UsagePanel.tsx

src/components/UsagePanel.tsx

1. import { useEffect, useState } from 'react'
3. import type { UsageReport } from '../ipc/gen/UsageReport'
4. import { shortModel, thousands, tokens, usd } from '../lib/format'
5. import { useStore } from '../state/store'
7. export function UsagePanel() {
8. const client = useStore((s) => s.client)
9. const spend = useStore((s) => s.spend)
10. const setPanel = useStore((s) => s.setPanel)
11. const [days, setDays] = useState<number | null>(null)
12. const [report, setReport] = useState<UsageReport | null>(null)
13. useEffect(() => {
14. void client?.usageReport(days).then(setReport)
15. }, [client, days])
17. const maxModel = Math.max(1, ...(report?.by_model.map((r) => r.cost_nanousd) ?? [1]))
18. const maxDay = Math.max(1, ...(report?.by_day.map((r) => r.cost_nanousd) ?? [1]))
19. const total = report?.by_model.reduce((s, r) => s + r.cost_nanousd, 0) ?? 0
20. const estimated = report?.by_model.some((r) => r.estimated)
21. return (
22. <div className="overlay" onMouseDown={(e) => e.target === e.currentTarget && setPanel(null)}>
23. <div className="sheet glass-strong" role="dialog" aria-label="Usage">
24. <header className="sheet-head">
25. <h2>Usage</h2>
26. <div className="filters">
27. {(
28. [
29. [null, 'This month'],
30. [7, '7 days'],
31. [30, '30 days'],
32. [365, 'Year'],
33. ] as const
34. ).map(([d, label]) => (
35. <button key={label} className={`pill ${days === d ? 'on' : ''}`} onClick={() => setDays(d)}>
36. {label}
37. </button>
38. ))}
39. </div>
40. <button className="ghost" onClick={() => setPanel(null)}>
41. Close
42. </button>
43. </header>
44. <div className="sheet-body">
45. <div className="stat-row">
46. <div className="stat glass-tint">
47. <span className="muted small">Spent</span>
48. <strong data-testid="usage-total">
49. {usd(total)}
50. {estimated ? '*' : ''}
51. </strong>
52. </div>
53. <div className="stat glass-tint">
54. <span className="muted small">Replies</span>
55. <strong>{thousands(report?.by_model.reduce((s, r) => s + r.messages, 0) ?? 0)}</strong>
56. </div>
57. <div className="stat glass-tint">
58. <span className="muted small">Tokens in / out</span>
59. <strong>
60. {tokens(report?.by_model.reduce((s, r) => s + r.prompt_tokens, 0) ?? 0)} /{' '}
61. {tokens(report?.by_model.reduce((s, r) => s + r.completion_tokens, 0) ?? 0)}
62. </strong>
63. </div>
64. {spend?.budget_usd != null && (
65. <div className="stat glass-tint">
66. <span className="muted small">Monthly budget</span>
67. <strong>${spend.budget_usd.toFixed(2)}</strong>
68. </div>
69. )}
70. </div>
71. <h3>By model</h3>
72. <ul className="bars">
73. {report?.by_model.map((r) => (
74. <li key={r.key}>
75. <span className="bar-label" title={r.key}>
76. {shortModel(r.key)}
77. </span>
78. <span className="bar-track">
79. <span className="bar-fill" style={{ width: `${(r.cost_nanousd / maxModel) * 100}%` }} />
80. </span>
81. <span className="bar-value">
82. {r.cost_nanousd > 0 ? usd(r.cost_nanousd) : 'free'}
83. {r.estimated ? '*' : ''}
84. </span>
85. </li>
86. ))}
87. </ul>
88. <h3>By day</h3>
89. <div className="days" role="img" aria-label="Spend per day">
90. {report?.by_day.map((r) => (
91. <div key={r.key} className="day" title={`${r.key}: ${usd(r.cost_nanousd)}`}>
92. <span className="day-fill" style={{ height: `${Math.max(3, (r.cost_nanousd / maxDay) * 100)}%` }} />
93. <span className="day-label">{r.key.slice(5)}</span>
94. </div>
95. ))}
96. </div>
97. {estimated && (
98. <p className="muted small">* includes estimates, from servers that do not report token counts.</p>
99. )}
100. </div>
101. </div>
102. </div>
103. )
104. }